const Item = ({title, to, icon, selected, setSelected}) => {
    const theme = useTheme();
    const colors = tokens(theme.palette.mode);
    return (
        <MenuItem
            active={selected === title}
            style={{
                color: colors.grey[100],
            }}
            onClick={() => setSelected(title)}
            icon={icon}
            component={<Link to={to}/>}
        >
            <Typography>{title}</Typography>

        </MenuItem>
    );
};

<Menu iconShape="square" menuItemStyles={{
                    button: {
                        "&:hover": {
                            backgroundColor: 'transparent !important',
                            color: "#868dfb !important",
                        },
                        "&:active": {
                            backgroundColor: 'transparent !important',
                            color: "red !important",
                        },
                    },
                }}>

I’ve tried using active but it appears to be only affecting the sidebar collapse button. Here is a link to my codesandbox