So I am having problems caching my autocomplete options for the autocomplete component of mui. This is what I currently have:

My fetching function that gets called on client input: (it's throttled)

const handleAutocompleteInput = (event, value) => {
    fetch(`http://localhost:80/players/autocomplete?term=${encodeURIComponent(value)}`)
      .then((response) => response.json())
      .then((names) => {
        setAutoCompleteOptions(names);
      });
  };

My state for the autocomplete options (which is located in a parent component so I pass the setAutoCompleteOptions to the children):

  const [autoCompleteOptions, setAutoCompleteOptions] = useState([])

And my autocomplete component:

<Autocomplete
      fullWidth
      options={autoCompleteOptions}
      classes={classes}
      getOptionLabel={(autoCompleteOptions) => autoCompleteOptions.name}
      onInputChange={_.debounce(
        (event, value) => handleAutocompleteInput(event, value),
        300
      )}
      isOptionEqualToValue={(autoCompleteOptions, value) =>
        autoCompleteOptions.id === value.id
      }
      //getOptionDisabled={(option) =>
      ///  option === timeSlots[0] || option === timeSlots[2]
      //}
      renderInput={(params) => <TextField {...params} placeholder="Име на играч" />}
    />

The objects I receive from the fetch.

{id: some id, name: some name}

I am replacing the autocomplete options entirely on every response I get from the fetch function. How can I cache them and have only one instance of the objects I receive.