La propiedad backgroundColor es la misma para el caso normal y el desplazamiento.

El código actual es el siguiente.

 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), }, } }));

Como puede ver, el color de backgroundColor: ({ currentFilter }) => getBgColor(currentFilter, theme) se repite para el caso normal y el desplazamiento.

¿Hay alguna manera de refactorizar esto con menos líneas de código? o es esta la mejor manera?