title: How to set default value in material-UI select box in react (after API call)?
body: <p>I try to use <a href="https://material-ui.com/api/select/" rel="nofollow noreferrer">Select Box</a> from MUI
  All really simple, like in an <a href="https://next.material-ui.com/components/selects/#main-content" rel="nofollow noreferrer">MUI demo</a></p>
  <p>Just one thing, my default value comes after an API call.<br/>
  So, I need to 'Update' the default value.<br/>
  After 5 sec the value of 'age' is updated to 30, but the select box doesn't.<br/>
  How to fix it?</p>
  <pre class="lang-js prettyprint-override"><code>    const [age, setAge] = React.useState&lt;number&gt;();
      
        React.useEffect(() =&gt; {
          //Emulate API call
          setTimeout(() =&gt; {
            setAge(30);
          }, 5000);
        }, []);
      
        const handleChange = (event: React.ChangeEvent&lt;{ value: unknown }&gt;) =&gt; {
          setAge(event.target.value as any);
        };
      
        return (
          &lt;Box sx={{ minWidth: 120 }}&gt;
            &lt;FormControl fullWidth&gt;
              &lt;InputLabel id=&quot;demo-simple-select-label&quot;&gt;Age&lt;/InputLabel&gt;
              &lt;Select
                labelId=&quot;demo-simple-select-label&quot;
                id=&quot;demo-simple-select&quot;
                value={age}
                label=&quot;Age&quot;
                onChange={handleChange}
              &gt;
                &lt;MenuItem value={10}&gt;Ten&lt;/MenuItem&gt;
                &lt;MenuItem value={20}&gt;Twenty&lt;/MenuItem&gt;
                &lt;MenuItem value={30}&gt;Thirty&lt;/MenuItem&gt;
              &lt;/Select&gt;
            &lt;/FormControl&gt;
            Current Age: {age}
          &lt;/Box&gt;
        );
  </code></pre>
  <p>code on sandbox: <a href="https://codesandbox.io/s/basicselect-material-demo-api-call-7k46b?file=/demo.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/basicselect-material-demo-api-call-7k46b?file=/demo.tsx</a></p>