title: Get the "ID" of the selected value with material-ui autocomplete
body: <p>I'm using the autocomplete component with material-ui.</p>
  <ol>
  <li><p>The data in &quot;customerList&quot; in the search field is no problem. But I can't get the &quot;ID&quot; number of the data I selected. I want to get the ID number of the selected data.</p>
  </li>
  <li><p>Also, an error like below appears. How can I fix this?</p>
  </li>
  </ol>
  <p><a href="https://i.stack.imgur.com/vklYW.png" rel="noreferrer">enter image description here</a></p>
  <pre><code>import Autocomplete from '@material-ui/lab/Autocomplete';
  
  
  class AppointmentFormContainerBasic extends React.PureComponent {
    constructor(props) {
      super(props);
    }
  
    render() {
  
      const textEditorProps = (field) =&gt; ({
        variant: 'outlined',
        onChange: ({ target: change }) =&gt; this.changeAppointment({
          field: [field], changes: change.value
        }),
        value: displayAppointmentData[field] || '',
        className: classes.textField
      });
  
      const customerList = [
        {id: &quot;1&quot;, customerName: 'John', customerSurname: &quot;test0&quot;},
        {id: &quot;2&quot;, customerName: 'Bob', customerSurname: &quot;test1&quot;},
        {id: &quot;3&quot;, customerNametle: 'steve', customerSurname: &quot;test2&quot;},
        {id: &quot;4&quot;, customerName: 'steve', customerSurname: &quot;test3&quot;},
        {id: &quot;4&quot;, customerName: 'natalia', customerSurname: &quot;test4&quot;}
      ];
  
      return (
        &lt;AppointmentForm.Overlay
          visible={visible}
          target={target}
          fullSize
          onHide={onHide}&gt;
          &lt;div&gt;
            &lt;div className={classes.content}&gt;
              &lt;div className={classes.wrapper}&gt;
                &lt;Create className={classes.icon} color=&quot;action&quot; /&gt;
                &lt;Autocomplete
                  id=&quot;free-solo-demo&quot;
                  freeSolo
                  options={customerList.map( (option) =&gt; {
                    if (top100Films.customerName === undefined) {
                      console.log(&quot;undefined&quot;)
                    } else {
                      console.log(&quot;option.customerName&quot;)
                    }
                    return option.customerName + &quot; &quot; + option.customerSurname;
                  })}
  
                  
                  defaultValue={displayAppointmentData['customerName']}
                  onInputChange={(event, newInputValue) =&gt; {
                    this.changeAppointment({
                      field: ['customerName'], changes: newInputValue,
                      value: displayAppointmentData[newInputValue] || '',
                    });
                  }}
  
                /&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/AppointmentForm.Overlay&gt;
      );
    }
  }
  </code></pre>