title: Material-UI <Autocomplete /> different label than option value
body: <p>I have a <a href="https://material-ui.com/components/autocomplete/" rel="noreferrer">Material-UI <code>&lt;Autocomplete /&gt;</code></a> component I am using where you can type in someone's name and it will provide a list of people to select from. This is a pretty standard use case, however I need the selected item in the form to be different than the label.</p>
  
  <p>Currently if you pick the entry labelled "John Smith", the text field will be filled with "John Smith". Instead, I want to fill the text field with that user's ID.</p>
  
  <p>The data for autocomplete is an array of objects like this:</p>
  
  <pre><code>{ "name": "John Smith", "id": 123456789 }
  </code></pre>
  
  <p>How can I make the autocomplete component put the user ID in the text field instead of the user label?</p>