title: React Material-UI: Autocomplete loses focus after options is setValue
body: <p>I am building a basic weather forecast app using React and Material UI. I am using Autocomplete provided by MUI.
  The issue I am facing is that after I type a place-name in the text field and get the options rendered, the text field loses its focus. I understand it is due to the <code>setPlaceList(response.data);</code> cause when I comment it out and put only <code>console.log(response.data);</code> the text field doesn't lose its focus.</p>
  <p>Here is the code:</p>
  <pre><code>const [placeList, setPlaceList] = useState([]);
  
  const onValueChange = (e) =&gt; {
          if(e.target.value.length &gt; 3){
              getCordinates(e.target.value);
          }
      }
  
  const getCordinates = debounce (place =&gt; {
  
          axios.get(`https://api.locationiq.com/v1/autocomplete.php?key=${api_key}&amp;q=${place}`)
          .then((response) =&gt; {
              setPlaceList(response.data);
              console.log(response.data)
          })
          .catch((e)=&gt;{
              window.alert(&quot;ENTER CORRECT LOCATION&quot;)
          })
      },500);
  
  
  &lt;Autocomplete className={styles.searchBar} freeSolo
                options={placeList}
                getOptionLabel={(option) =&gt; option.display_name}
                onChange={onPlaceSelect} 
                renderInput={params =&gt; (
                    &lt;CssTextField
                    {...params}
                    onChange={onValueChange} 
                    label=&quot;Enter Location&quot; variant=&quot;outlined&quot; required
                    /&gt;
                  )}
                /&gt;
  </code></pre>
  <p>I am not pasting <code>onPlaceSelect</code> function as it executes after I have selected a place from the drop-down and I don't think it is required for this problem.
  Below is the visual representation of what is happening...</p>
  <p><a href="https://i.stack.imgur.com/R3XU0.jpg" rel="nofollow noreferrer">As you can see the focus is still there even after I have typed in the place name cause I have commented <code>setPlaceList(response.data);</code> . The response did get printed in the console</a></p>
  <p><a href="https://i.stack.imgur.com/ZKhO8.jpg" rel="nofollow noreferrer">Now I have uncommented the <code>setPlaceList</code> and as you can see the options got rendered but the focus is disabled disallowing me to type anything further</a></p>