Nextjs Selects

import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter/prism';
import { prism } from 'react-syntax-highlighter/styles/prism';
// material-ui components
import { makeStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";

import styles from "assets/jss/nextjs-material-dashboard-pro/customSelectStyle.js";

const useStyles = makeStyles(styles);

export default function Example(){
  const [simpleSelect, setSimpleSelect] = React.useState("");
  const [multipleSelect, setMultipleSelect] = React.useState([]);
  const handleSimple = event => {
    setSimpleSelect(event.target.value);
  };
  const handleMultiple = event => {
    setMultipleSelect(event.target.value);
  };
  const classes = useStyles();
  const menuProps = { className: classes.selectMenu };
  const menuClasses = { select: classes.select };
  const inputPropsSingle = {
    name: "simpleSelect",
    id: "simple-select"
  };
  const disabledMenuItemClasses = { root: classes.selectMenuItem };
  const menuItemClasses = {
    root: classes.selectMenuItem,
    selected: classes.selectMenuItemSelected
  };
  const menuPropsMultiple = {
    className: classes.selectMenu,
    classes: { paper: classes.selectPaper }
  };
  const inputPropsMultiple = {
    name: "multipleSelect",
    id: "multiple-select"
  };
  return (
    <GridContainer>
      <GridItem xs={12} sm={6} md={5} lg={5}>
        <FormControl fullWidth className={classes.selectFormControl}>
          <InputLabel
            htmlFor="simple-select"
            className={classes.selectLabel}
          >
            Single Select
          </InputLabel>
          <Select
            MenuProps={menuProps}
            classes={menuClasses}
            value={simpleSelect}
            onChange={handleSimple}
            inputProps={inputPropsSingle}
          >
            <MenuItem
              disabled
              classes={disabledMenuItemClasses}
            >
              Single Select
            </MenuItem>
            <MenuItem
              classes={menuItemClasses}
              value="2"
            >
              Paris
            </MenuItem>
            <MenuItem
              classes={menuItemClasses}
              value="3"
            >
              Bucharest
            </MenuItem>
            <MenuItem
              classes={menuItemClasses}
              value="4"
            >
              Rome
            </MenuItem>
          </Select>
        </FormControl>
      </GridItem>
      <GridItem xs={12} sm={6} md={5} lg={5}>
        <FormControl fullWidth className={classes.selectFormControl}>
          <InputLabel
            htmlFor="multiple-select"
            className={classes.selectLabel}
          >
            Multiple Select
          </InputLabel>
          <Select
            multiple
            value={multipleSelect}
            onChange={handleMultiple}
            MenuProps={menuPropsMultiple}
            classes={menuClasses}
            inputProps={inputPropsMultiple}
          >
            <MenuItem
              disabled
              classes={disabledMenuItemClasses}
            >
              Multiple Select
            </MenuItem>
            <MenuItem
              classes={menuItemClasses}
              value="2"
            >
              Paris
            </MenuItem>
            <MenuItem
              classes={menuItemClasses}
              value="3"
            >
              Bucharest
            </MenuItem>
            <MenuItem
              classes={menuItemClasses}
              value="4"
            >
              Rome
            </MenuItem>
          </Select>
        </FormControl>
      </GridItem>
    </GridContainer>
  );
}