title: Material ui list of select item need to be selected
body: <p>i have created selected box..using functional component...i am getting list of items from the back end, i am looping that list and showing in the front end....now i need to be selected item need to show in the box what i have selected...could any one help on this...</p>
  
  <p>Please see my example code in this link <a href="https://codesandbox.io/s/gallant-water-fnqiv" rel="nofollow noreferrer">https://codesandbox.io/s/gallant-water-fnqiv</a></p>
  
  <pre><code>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";
  
  const useStyles = makeStyles(theme =&gt; ({
    formControl: {
      margin: theme.spacing(1),
      minWidth: 120
    },
    selectEmpty: {
      marginTop: theme.spacing(2)
    }
  }));
  
  const lists = ["Ten", "twenty", "Thirty", "Fourty", "Fifity", "Sixty"];
  export default function SimpleSelect() {
    const classes = useStyles();
    const [age, setAge] = React.useState("");
  
    const inputLabel = React.useRef(null);
    const [labelWidth, setLabelWidth] = React.useState(0);
    React.useEffect(() =&gt; {
      setLabelWidth(inputLabel.current.offsetWidth);
    }, []);
  
    const handleChange = event =&gt; {
      setAge(event.target.value);
    };
  
    return (
      &lt;div&gt;
        &lt;FormControl variant="outlined" className={classes.formControl}&gt;
          &lt;InputLabel ref={inputLabel} id="demo-simple-select-outlined-label"&gt;
            Age
          &lt;/InputLabel&gt;
          &lt;Select
            labelId="demo-simple-select-outlined-label"
            id="demo-simple-select-outlined"
            value={age}
            onChange={handleChange}
            labelWidth={labelWidth}
          &gt;
            &lt;MenuItem value={""}&gt;
              {lists.map(item =&gt; {
                &lt;li&gt;{item.list}&lt;/li&gt;;
              })}
            &lt;/MenuItem&gt;
          &lt;/Select&gt;
        &lt;/FormControl&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>