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

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

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

As React introduced React-Hooks, you just need to pass your default value in React.useState() as React.useState(10).

export default function CustomizedSelects() {  const classes = useStyles();  const [age, setAge] = React.useState(10);// <--------------(Like this).  const handleChange = event => {    setAge(event.target.value);  };  return (    <form className={classes.root} autoComplete="off">      <FormControl className={classes.margin}>        <Select          value={age}          className={classes.inner}          onChange={handleChange}          input={<BootstrapInput name="currency" id="currency-customized-select" />}        >          <MenuItem value={10}>Ten</MenuItem>          <MenuItem value={20}>Twenty</MenuItem>          <MenuItem value={30}>Thirty</MenuItem>        </Select>      </FormControl>    </form>  );}

You can just pass the displayEmpty into select

<Select    id="demo-simple-select-outlined"    displayEmpty    value={select}    onChange={handleChange}>

and define the menuItem like

<MenuItem value=""><Put any default Value which you want to show></MenuItem>