title: AutoComplete gives red warning when value is set to the useState that it modifies
body: <pre><code>        const [country, set_country] = useState();
  
          &lt;Autocomplete
            autoHighlight={true} //needed
            autoSelect={true}
            id=&quot;geo-select-country&quot;
            options={all_country}
            value={country} // culprit that causes red warning
            onChange={(event, selected_country) =&gt; {
              set_country(selected_country);
            }}
            classes={autocomplete_classes}
            renderInput={(params) =&gt; (
              &lt;TextField {...params} label={&quot;Country&quot;} margin=&quot;none&quot; focused /&gt;
            )}
          /&gt;
  </code></pre>
  <p>warning message:</p>
  <pre><code>index.js:1 MUI: A component is changing the uncontrolled value state of Autocomplete to be controlled.
  Elements should not switch from uncontrolled to controlled (or vice versa).
  Decide between using a controlled or uncontrolled Autocomplete element for the lifetime of the component.
  The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.
  </code></pre>
  <p>The AutoComplete modifies the <code>useState</code>, but the value of the <code>useState</code> modifies the <code>AutoComplete</code>.</p>
  <p>Is this not correct?</p>