I have the following code:

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>

But it doesn't work. My react app goes blink when i go to the there where the select. How can i change the color select from MUI ?