Reactjs - Update options by hitting API on every input change in Autocomplete component (Material UI)

I had faced this problem I manually called the API when ever the user types in. find the link for the sandbox. Check the onChange prop for the textfield rendered inside the autocomplete

// *https://www.registers.service.gov.uk/registers/country/use-the-api*import fetch from "cross-fetch";import React from "react";import TextField from "@material-ui/core/TextField";import Autocomplete from "@material-ui/lab/Autocomplete";import CircularProgress from "@material-ui/core/CircularProgress";export default function Asynchronous() {  const [open, setOpen] = React.useState(false);  const [options, setOptions] = React.useState([]);  const loading = open && options.length === 0;  const onChangeHandle = async value => {// this default api does not support searching but if you use google maps or some other use the value and post to get back you reslut and then set it using setOptions     console.log(value);    const response = await fetch(      "https://country.register.gov.uk/records.json?page-size=5000"    );    const countries = await response.json();    setOptions(Object.keys(countries).map(key => countries[key].item[0]));  };  React.useEffect(() => {    if (!open) {      setOptions([]);    }  }, [open]);  return (    <Autocomplete      id="asynchronous-demo"      style={{ width: 300 }}      open={open}      onOpen={() => {        setOpen(true);      }}      onClose={() => {        setOpen(false);      }}      getOptionSelected={(option, value) => option.name === value.name}      getOptionLabel={option => option.name}      options={options}      loading={loading}      renderInput={params => (        <TextField          {...params}          label="Asynchronous"          variant="outlined"          onChange={ev => {            // dont fire API if the user delete or not entered anything            if (ev.target.value !== "" || ev.target.value !== null) {              onChangeHandle(ev.target.value);            }          }}          InputProps={{            ...params.InputProps,            endAdornment: (              <React.Fragment>                {loading ? (                  <CircularProgress color="inherit" size={20} />                ) : null}                {params.InputProps.endAdornment}              </React.Fragment>            )          }}        />      )}    />  );}