title: MUI Object in Select default value not showing but shows when object selected
body: <p>As the code shows options has a &quot;chosenValue&quot; by default, however I have to change it for something to show by default in the dropdown or the dropdown is empty. How can I make it so when the page loads it by default value show &quot;chosenValue&quot;?
  Here is a codesandbok example: <a href="https://codesandbox.io/s/practical-noether-dwt52t?file=/src/App.js:0-1421" rel="nofollow noreferrer">https://codesandbox.io/s/practical-noether-dwt52t?file=/src/App.js:0-1421</a></p>
  <pre><code>import &quot;./styles.css&quot;;
  import {
    FormControl,
    InputLabel,
    Select,
    MenuItem,
    OutlinedInput
  } from &quot;@mui/material&quot;;
  import { useState } from &quot;react&quot;;
  export default function App() {
    const [options, setOptions] = useState({
      chosenValue: {
        label: &quot;apple&quot;,
        color: &quot;green&quot;
      },
      aviableValues: [
        { label: &quot;apple&quot;, color: &quot;red&quot; },
        { label: &quot;Orange&quot;, color: &quot;Orange&quot; },
        { label: &quot;pear&quot;, color: &quot;green&quot; }
      ]
    });
    const handleContentChange = (event) =&gt; {
      setOptions((prevState) =&gt; ({
        ...prevState,
        chosenValue: event.target.value
      }));
    };
    return (
      &lt;&gt;
        {options.chosenValue &amp;&amp; (
          &lt;FormControl sx={{ mt: 2 }}&gt;
            &lt;InputLabel id=&quot;demo-simple-select-helper-label&quot;&gt;Fruits&lt;/InputLabel&gt;
            &lt;Select
              labelId=&quot;demo-simple-select-label&quot;
              id=&quot;demo-simple-select&quot;
              value={options.chosenValue}
              onChange={(e) =&gt; handleContentChange(e)}
              input={&lt;OutlinedInput label={options.chosenValue.label} /&gt;}
              fullWidth
            &gt;
              {options.aviableValues.map((item) =&gt; {
                return (
                  &lt;MenuItem value={item} key={item}&gt;
                    {item.label}
                  &lt;/MenuItem&gt;
                );
              })}
            &lt;/Select&gt;
          &lt;/FormControl&gt;
        )}
        {options.chosenValue &amp;&amp; &lt;p&gt;{options.chosenValue.label}&lt;/p&gt;}
      &lt;/&gt;
    );
  }
  </code></pre>