Tengo el siguiente código:

 const useStyles = makeStyles({ select: { '&:before': { borderColor: 'white', }, '&:after': { borderColor: 'white', }, '&:not(.Mui-disabled):hover::before': { borderColor: 'white', }, }, icon: { fill: 'white', }, root: { color: 'white', }, }) const classes = useStyles(); return ( <Box sx={ { width: '20%', height: '21%', position: 'relative', bottom: '15px', borderRadius: '10px', padding: '2px', color: 'white', outline: 'white' }}> <FormControl fullWidth > <InputLabel id="demo-simple-select-label" style={{color: 'white', borderColor: 'white'}}>Cidade</InputLabel> <Select labelId="demo-simple-select-label" id="demo-simple-select" value={regiao} label="Região" onChange={e => (handleChange(e))} inputProps={{ classes: { icon: classes.icon, root: classes.root, }, }} > <MenuItem value={10}>Sao Paulo</MenuItem> </Select> </FormControl> </Box>

Pero no funciona. Mi aplicación de reacción parpadea cuando voy al lugar donde selecciono. ¿Cómo puedo cambiar la selección de color de MUI?