title: Material UI: Autocomplete with value set as string and options set as objects?
body: <p>I'm trying to create a custom <code>Select</code> component that uses material ui's <code>Autocomplete</code> as a base.</p>
  <p>However, I'm running into issues trying to set the <code>value</code> to a string like how normal select dropdowns are usually used. It seems to only work if I set the <code>value</code> to the whole object.</p>
  <p>App.js</p>
  <pre><code>const options = [
    { id: '1', name: 'United States' },
    { id: '2', name: 'Canada' },
    { id: '3', name: 'Mexico' },
  ];
  
  const App = () =&gt; {
    const [val, setVal] = useState();
  
    return (
      &lt;Select
        options={options}
        value={val}             //&lt;----- only works if val === one of the country objects in options array, but i want to se it as country.id
        label=&quot;Country&quot;
        placeholder=&quot;Enter a country&quot;
        onChange={newValue =&gt; setVal(newValue)}
        getOptionLabel={(option) =&gt; option.name}
        getOptionValue={(option) =&gt; option.id}
      /&gt;
    );
  }
  </code></pre>
  <p>Select.js:</p>
  <pre><code>const Select = ({
    getOptionLabel,
    getOptionValue,
    placeholder,
    options,
    label,
    onChange,
    value = &quot;&quot;
  }) =&gt; {
    const compareOptionAndValue = (option, value) =&gt; {
      console.log(&quot;oooooooooo&quot;, option);
      console.log(&quot;vvvvvvvvvvv&quot;, value);
      console.log(&quot;eeeeeeee&quot;, getOptionValue(option) === value);
  
      return getOptionValue(option) === value;
    };
  
    return (
      &lt;MuiAutocomplete
        options={options}
        value={value}
        getOptionSelected={compareOptionAndValue}
        getOptionLabel={(option) =&gt;
          option &amp;&amp; getOptionLabel(option) ? getOptionLabel(option) : &quot;&quot;
        }
        onChange={(_event, option) =&gt; onChange(getOptionValue(option))}
        renderInput={(params) =&gt; (
          &lt;MuiTextField
            {...params}
            label={label}
            placeholder={value ? undefined : placeholder}
            variant=&quot;outlined&quot;
            fullWidth
          /&gt;
        )}
      /&gt;
    );
  };
  </code></pre>
  <p><code>getOptionSelected</code> doesn't work as expected. I thought it would help determine which option was selected but it doesn't do anything even though it returns true.</p>
  <p>Here's a codesandbox example:</p>
  <p><a href="https://codesandbox.io/s/material-ui-autocomplete-forked-brjis?file=/src/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/material-ui-autocomplete-forked-brjis?file=/src/index.js</a></p>