ToggleButtonGroup react material ui - reactjs

Question

I cant seem to get the ToggleButton selected property from material ui to work on ToggleButton.
I have made a StyledToggleButton as the documentation from Material Ui.
const StyledToggleButton = withStyles({
root: {
fontFamily: 'Arial',
fontSize: '14px',
lineHeight: '20px',
letterSpacing: '0.25',
color: 'rgba(0, 0, 0, 0.87)',
padding: '15px 15px',
textTransform: 'none',
width: '100%',
'&$selected': { //<--this is my attempt as per documentation
color: 'red !important',
backgroundColor: 'red !important',
},
selected: {},
},
})(ToggleButton);
I am using the ToggleButtonGroup and passing ToggleButton as a child.
I have looked at using MuiTheme but i did not understand how to make that work in this example.
here is the rest for reference:
const StyledToggleButton = withStyles({
root: {
fontFamily: 'Arial',
fontSize: '14px',
lineHeight: '20px',
letterSpacing: '0.25',
color: 'rgba(0, 0, 0, 0.87)',
padding: '15px 15px',
textTransform: 'none',
width: '100%',
'&$selected': {
color: 'red !important',
backgroundColor: 'red !important',
},
selected: {},
},
})(ToggleButton);
const StyledGroupButton = withStyles({
root: {
padding: '15px 15px',
width: '100%',
},
})(ToggleButtonGroup);
export default function ObjectViewCard(props) {
const classes = useStyles();
const [alignment, setAlignment] = React.useState('none');
const handleChange = (
event: React.MouseEvent<HTMLElement>,
newAlignment: string,
) => {
setAlignment(newAlignment);
};
const children = [
<StyledToggleButton key={1} value="left">
{props.leftButtonContent}
</StyledToggleButton>,
<StyledToggleButton key={2} value="right">
{props.rightButtonContent}
</StyledToggleButton>,
];
return (
<Card>
<hr className={classes.divider}/>
<div className={`row ${classes.rowContainer}`}>
<div className="col-6">
<span className={classes.header}>Velg visning</span>
</div>
<div className="col-6">
<span className={classes.info}>
<InfoOutlinedIcon className={classes.icon}/> Vis tegnforklaring
</span>
</div>
</div>
<StyledGroupButton value={alignment} exclusive onChange={handleChange}>
{children}
</StyledGroupButton>
</Card>
);
}
```

Answer 1

call it like i did, but selected: {} need to be on same tree-level as root, solution here:
const StyledToggleButton = withStyles({
root: {
fontFamily: 'Arial',
fontSize: '14px',
lineHeight: '20px',
letterSpacing: '0.25px',
color: 'rgba(0, 0, 0, 0.87)',
padding: '15px 15px',
textTransform: 'none',
width: '100%',
'&$selected': {
backgroundColor: 'rgba(33, 137, 214, 0.14)',
color: 'rgb(26, 88, 159)',
'&:hover': {
backgroundColor: 'rgba(33, 137, 214, 0.14)',
color: 'rgb(26, 88, 159)',
},
},
},
selected: {},
})(ToggleButton);