How to keep a material ui select specific menu item selected?

I am using react with material ui . When using select component , I want to keep a specific menu item keep selected initially. For example here I want <MenuItem value={20}>Twenty</MenuItem> to be default selected . Passing selected={true} prop not working.

<FormControl className={classes.formControl}>
    <InputLabel id="demo-controlled-open-select-label">Age</InputLabel>
    <Select
      labelId="demo-controlled-open-select-label"
      id="demo-controlled-open-select"
      open={open}
      onClose={handleClose}
      onOpen={handleOpen}
      value={age}
      onChange={handleChange}
    >
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20} selected={true}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  </FormControl>

Answer

Use defaultValue prop of Select component, if you’re not controlling the component.

<FormControl className={classes.formControl}>
<InputLabel id="demo-controlled-open-select-label">Age</InputLabel>
<Select
  labelId="demo-controlled-open-select-label"
  id="demo-controlled-open-select"
  open={open}
  onClose={handleClose}
  onOpen={handleOpen}
  defaultValue={20}
  onChange={handleChange}
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

For controlled component initialize your state variable (age in your case) with a default value.