title: React - Autocomplete calling API
body: <p>I'm using the Material UI Autocomplete component to make an API call in a method that returns a JSON. The idea is that when the user types in the autocomplete component it makes a call to find the results matching the string.</p>
  <p>The problem I have with the code I put is that I don't know how to make the API call and return the results in the autocomplete component</p>
  <pre><code>const [itemsAutocomplete, setItemsAutocomplete] = useState([])
  
   &lt;Autocomplete
       disablePortal
       id=&quot;autocomplete-search&quot;
       onChange={handleItemsOptions}
       getOptionLabel={option =&gt; option.name}
       sx={{ width: 300 }}
       renderInput={params =&gt; (
       &lt;TextField {...params} label=&quot;Search an item...&quot; /&gt;
       )}
       /&gt;
  
  
  
  const handleItemsOptions = event =&gt; {
  
      const requestOptions = {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
              name : search_name,
          }),
      }
  
     
      fetch(
          `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/product/items/search/`,
          requestOptions,
      )
          .then(response =&gt; response.json())
          .then(json =&gt; setItemsAutocomplete(json))
  }
  </code></pre>