The backgroundColor property is same for normal case and hover.

The current code is as follows.

const getBgColor = (currentFilter, theme) => {
   return getSelectedFlag(currentFilter)?.bgColor || 
   theme.palette.common.white;
};
const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: ({ currentFilter }) => getBgColor(currentFilter, theme),
    "&:hover": {
      backgroundColor: ({ currentFilter }) => getBgColor(currentFilter, theme),
    },
  }
}));

As you can see the backgroundColor: ({ currentFilter }) => getBgColor(currentFilter, theme) is being repeated for normal case and hover.

Is there a way to refactor this with less number of lines of code? or is this the best way?