How to set default value in material-UI select box in react?

Question

I am using Select box from material-ui

I want to show "select the value" option by default selected but after that user is not able to select this option.

<FormControl required className={classes.formControl}>
  <InputLabel htmlFor="circle">Circle</InputLabel>
    <Select
      value={circle}
      onChange={event => handleInput(event, "circle")}
      input={<Input name="circle" id="circle" />}
    >
      <MenuItem value="" disabled>
        <em>select the value</em>
      </MenuItem>

      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  <FormHelperText>Some important helper text</FormHelperText>
</FormControl>

Current code on sandbox: https://codesandbox.io/s/xoylmlj1qp

I want to make like this: https://jsfiddle.net/wc1mxdto/

---

Update

I changed the state 20 to blank string in circle

form: {
  searchValue: "",
  circle: '',
  searchCriteria: ""
}

now expected output should be dropdown should show "please select value" but currently it showing this

Answer 1

You need to provide correct MenuItem value in state to be matched on render.

Here is the working codesandbox: Default Select Value Material-UI