How can I make my Material Icons change color when I hover over them?

I'm using mui icons 5.2.0 in my React page.

The icon is showing up, but it does not change color when I hover over it.

Here is my code:

import EditIcon from '@mui/icons-material/Edit';
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
    customHoverFocus: {
        "&:hover, &.Mui-focusVisible": { backgroundColor: "yellow" }
    }
}));

<EditIcon className={useStyles.customHoverFocus} />

Is there anything I am missing?