response-autosuggest с debounce и отличнымUntilChanged

Намерение:

Я пытаюсь создать идеальное поле поиска, которое не будет делать никаких вызовов API до тех пор, пока:

1. Достигнуто время устранения дребезга 350 мс.
2. И пока не изменится значение поля ввода.

Что я пробовал до сих пор:

Я использовал тему для отслеживания изменений в поле ввода. Каждый раз, когда происходит изменение в поле ввода и вызывается handleSuggestionsFetchRequested, я нажимаю новое значение на Subject, используя searchString$.next(userInput);

И в ловушке useEffect я pipe использую searchString$ с debounceTime(350) и distinctUntilChanged(). Что-то вроде этого:

useEffect(() => {
  searchString$
  .pipe(
    debounceTime(350),
    distinctUntilChanged(),
    switchMap(searchString =>
      ajax(`https://api.github.com/search/users?q=${searchString}`)
    ),
    map((networkResponse: any) => networkResponse.response.items)
  )
  .subscribe((suggestions: Array<User>) => setSuggestions(suggestions));
}, [searchString$]);

Но вызовы API по-прежнему выполняются каждый раз при изменении userInput.

Проблема:

Я думаю, проблема в том, что каждый раз, когда значение поля ввода изменяется, я также устанавливаю состояние:

const handleChange = (
  event: React.ChangeEvent<{}>,
  { newValue }: Autosuggest.ChangeEvent
) => {
  setUserInput(newValue);
};

Это вызывает повторный рендеринг компонента и вызов useEffect, который в конечном итоге снова и снова вызывает вызов API.

Я могу ошибаться.

Как воспроизвести:

Я создал Образец тестовой среды кода это повторяет проблему.