title: Avatar background color not changing dynamically in material-ui v5
body: <p>I'm trying to change each avatar background color on the basis of categories, for example if the category is &quot;work&quot; then the avatar color must be yellow if the category is &quot;todos&quot; then the avatar color must be pink and so on. But the code is displaying the default grey background-color of each avatar. I'm unable to change the background-color.</p>
  <pre><code>import React from &quot;react&quot;;
  import Card from &quot;@mui/material/Card&quot;;
  import CardHeader from &quot;@mui/material/CardHeader&quot;;
  import CardContent from &quot;@mui/material/CardContent&quot;;
  import { IconButton, Typography } from &quot;@mui/material&quot;;
  import { DeleteOutlined } from &quot;@mui/icons-material&quot;;
  import { makeStyles } from &quot;@mui/styles&quot;;
  import { blue, green, pink, yellow } from &quot;@mui/material/colors&quot;;
  import Avatar from &quot;@mui/material/Avatar&quot;;
  
  const useStyles = makeStyles({
    avatar: {
      backgroundColor: (note) =&gt; {
        if (note.category == &quot;work&quot;) {
          return yellow[700];
        }
        if (note.category == &quot;money&quot;) {
          return green[500];
        }
        if (note.category == &quot;todos&quot;) {
          return pink[500];
        }
        return blue[500];
      },
    },
  });
  
  const NoteCard = ({ note, handleDelete }) =&gt; {
    const classes = useStyles(note);
  
    return (
      &lt;div&gt;
        &lt;Card elevation={1}&gt;
          &lt;CardHeader
            avatar={
              &lt;Avatar className={classes.avatar}&gt;
                {note.category[0].toUpperCase()}
              &lt;/Avatar&gt;
            }
            action={
              &lt;IconButton onClick={() =&gt; handleDelete(note.id)}&gt;
                &lt;DeleteOutlined /&gt;
              &lt;/IconButton&gt;
            }
            title={note.title}
            subheader={note.category}
          /&gt;
          &lt;CardContent&gt;
            &lt;Typography variant=&quot;body2&quot; color=&quot;textSecondary&quot;&gt;
              {note.details}
            &lt;/Typography&gt;
          &lt;/CardContent&gt;
        &lt;/Card&gt;
      &lt;/div&gt;
    );
  };
  
  export default NoteCard;
  </code></pre>
  <p><a href="https://www.youtube.com/watch?v=gEbSx5CCgSc&amp;list=PL4cUxeGkcC9gjxLvV4VEkZ6H6H4yWuS58&amp;index=17" rel="nofollow noreferrer">video reference</a></p>