title: Option value is not appearing when selected in drop down box
body: <p>I am trying to troubleshoot a problem which I am unable to solve. The issue is that I have a dropdown box with a select tag with some menu items in it. When I click one of the menu items the value is not appearing in the select box and its just empty. However when I console log the selected item I can see what I am selecting which is the menu item. Heres the code:</p>
  <pre><code>&lt;Select labelId=&quot;demo-simple-select-label&quot; id=&quot;demo-simple-select&quot; value={selectedMake} onChange={handleMake}&gt;
                {console.log(makes)}
                {makes &amp;&amp;
                  makes.map((select, key) =&gt; (
                    &lt;MenuItem key={key} value={select}&gt;
                        {console.log(select)}
                      {select.name}
                    &lt;/MenuItem&gt;
                  ))}
              &lt;/Select&gt;
  </code></pre>
  <p>If you're wondering what is &quot;makes&quot;, it is just this:</p>
  <pre><code>(3) [{…}, {…}, {…}]
  0: {name: &quot;Honda&quot;, id: &quot;5de9c553bce4b703a335c204&quot;}
  1: {name: &quot;Toyota&quot;, id: &quot;5e4dfbee2d445b7525414c1f&quot;}
  2: {name: &quot;Suzuki&quot;, id: &quot;5e4e00732d445b7525414c46&quot;}
  </code></pre>
  <p>Im not sure why the when Honda is selected for example it is not showing in the box. I reckon it might be something to do with the id. Do let me know how to solve this problem.</p>
  <p>This is the handleMake function as well, it is a function that is passed in as a prop from another file:</p>
  <pre><code>handleMake = (event) =&gt; {
      this.setState({
        selectedMake: event.target.value.name,
        selectedMakeId: event.target.value.id,
      });
    };
  </code></pre>