Avatar random backgroundColor on fallback

Hello I’m filling a users grid with the Avatar component, when the user has no photo the initial letter is shown, what I would like to know is how I can make each Avatar have a random backgroundColor when the image load fails.

If possible I would like to suggest as an improvement to the component to have the backgroundColor in a random way.

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    large: {
      fontSize: "2.5rem",
      width: 100,
      height: 100
    }
  })
);

....

<Avatar
        variant="square"
        ref={setImageRef}
        src={imageSrc}
        alt={alt}
        className={classes.large}
      />

Tnks.

Material-ui: v4.8.3

[difagume]

Thanks @oliviertassinari , I made some changes to the code but it generates the same color for all the Avatar components, how could I make each Avatar have a different color?

function stringToColor() {
  let hex = Math.floor(Math.random() * 0xFFFFFF);
  let color = "#" + hex.toString(16);

  return color;
}

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    large: {
      textTransform: 'uppercase',
      fontSize: '2.5rem',
      width: 100,
      height: 100
    },
    colorDefault: {
      backgroundColor: `${stringToColor()}`
    }
  })
);


<Avatar
        variant="square"
        ref={setImageRef}
        src={imageSrc}
        alt={alt}
        className={classes.large}
        classes={{
          colorDefault: classes.colorDefault
        }}
      />

[difagume]

@oliviertassinari again thank you, I did what you told me to do, my code is as follows in case anyone finds it useful

function randomColor() {
  let hex = Math.floor(Math.random() * 0xFFFFFF);
  let color = "#" + hex.toString(16);

  return color;
}

...

<Avatar
        variant="square"
        ref={setImageRef}
        src={imageSrc}
        alt={alt}
        className={classes.large}
        style={{
          backgroundColor: randomColor()
        }}
      />