change select element color to another when open

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme) => ({
  button: {
    display: 'block',
    marginTop: theme.spacing(2),
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  select: {
    borderBottom: 'opx',
    '& ul': {
      paddingTop: '0px',
      paddingBottom: '0px',
    },
    '& ul:hover': {
      backgroundColor: '#1E2328',
    },
   
    '& .Mui-selected': {
      backgroundColor: '#1E2328',
      color: '#E9ECEC',
      fontWeight: '400, regular',
    },
    '& .Mui-selected:hover': {
      backgroundColor: '#1E2328',
    },
  },
  menuItemm: {
    display: 'flex',
    width: '225px',
    height: '56px',
    justifyContent: 'space-between',
    // border: '1px solid gray',
    backgroundColor: '#0B0B0B',
    color: 'white',
  },
  placeholder: {
    color: '#E9ECEC',
  },
}));

export default function ControlledOpenSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState('');
  const [open, setOpen] = React.useState(false);

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleOpen = () => {
    setOpen(true);
  };

  return (
    <div>
 
      <FormControl className={classes.formControl}>
        <InputLabel  style={{backgroundColor:"gray",color:"white"}} id="demo-controlled-open-select-label">Age</InputLabel>
        <Select
          labelId="demo-controlled-open-select-label"
          id="demo-controlled-open-select"
          style={{backgroundColor:"gray",color:"white"}}
          open={open}
          MenuProps={{
            classes: { paper: classes.select },
            anchorOrigin: {
              vertical: 'bottom',
              horizontal: 'left',
            },
            transformOrigin: {
              vertical: 'top',
              horizontal: 'left',
            },
            getContentAnchorEl: null,
          }}
          onClose={handleClose}
          onOpen={handleOpen}
          value={age}
         
          onChange={handleChange}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem                           className={classes.menuItemm}
 value={10}>Ten</MenuItem>
          <MenuItem                           className={classes.menuItemm}
 value={20}>Twenty</MenuItem>
          <MenuItem                           className={classes.menuItemm}
 value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}