title: material-ui useAutocomplete with asynchronus
body: <p>I'm trying to use material-ui <code>useAutocomplete</code> with asynchronus call. 
  the easy case with <code>autocomplete</code> work  but i need to tweak the dialog displayed when input is focused so i have to use <code>useAutocomplete</code>.</p>
  
  <p>so i try to merge this code (async) : <a href="https://codesandbox.io/s/pvjgx" rel="nofollow noreferrer">https://codesandbox.io/s/pvjgx</a></p>
  
  <p>with this one (useAutocomplete) :  <a href="https://codesandbox.io/s/261pd?file=/demo.js" rel="nofollow noreferrer">https://codesandbox.io/s/261pd?file=/demo.js</a></p>
  
  <p>the problem is i don't know where or how to put <code>onChange</code> to my input so i can trigger the async function who fetch the data</p>
  
  <p>this is the unworking code i get so far  (unworking sandbox) <a href="https://codesandbox.io/s/material-demo-gl9pw?file=/demo.js" rel="nofollow noreferrer">https://codesandbox.io/s/material-demo-gl9pw?file=/demo.js</a></p>
  
  <pre><code>import React from "react";
  import useAutocomplete from "@material-ui/lab/useAutocomplete";
  
  import { InputBase } from "@material-ui/core";
  import CircularProgress from "@material-ui/core/CircularProgress";
  
  import styled from "styled-components";
  
  import { makeStyles } from "@material-ui/core/styles";
  
  const Listbox = styled("ul")`
    width: 300px; margin: 2px 0 0;padding: 0;position: absolute; list-style: none; background-color: #fff;overflow: auto;max-height: 250px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); z-index: 1;
    &amp; li {padding: 5px 12px; display: flex; &amp; span {flex-grow: 1; }&amp; svg { color: transparent; } }
    &amp; li[aria-selected="true"] { background-color: #fafafa; font-weight: 600; &amp; svg {color: #1890ff;}}
    &amp; li[data-focus="true"] {background-color: #e6f7ff; cursor: pointer; &amp; svg { color: #000; } }
  `;
  
  const useStyles = makeStyles(theme =&gt; ({
    autoWidth: {width: "auto"},
    input: {
      marginLeft: theme.spacing(1),
      flex: 1,
      color: "white",
      textAlign: "center",
      align: "center",
      "&amp; input": {
        textAlign: "center"
      }
    },
    iconButton: {
      padding: 10,
      color: "white"
    },
    searchRoot: {
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      backgroundColor: "blue"
    }
  }));
  
  export default function MyAutocomplete() {
    const classes = useStyles();
  
    const [value, setValue] = React.useState("");
    const [open, setOpen] = React.useState(false);
    const [options, setOptions] = React.useState([]);
    const loading = open &amp;&amp; options.length === 0;
  
    React.useEffect(() =&gt; {
      let active = true;
  
      if (!loading) { return undefined; }
  
      console.log("run")(async () =&gt; {
        const response = await fetch("https://country.register.gov.uk/records.json?page-size=5000");
        const countries = await response.json();
  
        if (active) {
          setOptions(Object.keys(countries).map(key =&gt; countries[key].item[0]));
        }
      })();
  
      return () =&gt; {
        active = false;
      };
    }, [loading]);
  
    React.useEffect(() =&gt; {
      if (!open) {
        setOptions([]);
      }
    }, [open]);
  
    const {
      getRootProps, getInputLabelProps, getInputProps, getListboxProps, getOptionProps, groupedOptions, focused, setAnchorEl
      // value
    } = useAutocomplete({
      id: "customized-autocomplete-async",
      options: options,
      getOptionLabel: option =&gt; option.name
    });
  
    return (
      &lt;div className={classes.autoWidth}&gt;
        &lt;div {...getRootProps()}&gt;
          &lt;InputBase
            {...getInputProps()}
            //value={value}
            //onChange={event =&gt; {setValue(event.target.value);          }}
            inputRef={setAnchorEl}
            className={classes.input}
            placeholder="Localisation"
            inputProps={{ "aria-label": "Localisation" }}
            fullWidth={true}
            endAdornment={
              &lt;React.Fragment&gt;
                {loading ? &lt;CircularProgress color="inherit" size={20} /&gt; : null}
              &lt;/React.Fragment&gt;
            }
          /&gt;
        &lt;/div&gt;
        {focused &amp;&amp; (
          &lt;div className={classes.autoWidth}&gt;
            &lt;Listbox {...getListboxProps()}&gt;
              &lt;div&gt; Localiser moi ! &lt;/div&gt;
              &lt;br /&gt;
              {groupedOptions.map((option, index) =&gt; (
                &lt;li {...getOptionProps({ option, index })}&gt;
                  &lt;span&gt;{option.title}&lt;/span&gt;
                &lt;/li&gt;
              ))}
            &lt;/Listbox&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>any tips is welcomed </p>