Как открыть элемент автозаполнения с помощью JS событий

Question

Я пытаюсь вручную написать код JS внутри консоли, чтобы вызвать открытие элемента автозаполнения реакции

Найти и сохранить элементы

const autoSuggestWrapper = document.querySelector('.react-autosuggest__container');
const autoSuggestInput = autoSuggestWrapper.querySelector('input')

Если вставить символ «c» и щелкнуть ввод в пользовательском интерфейсе, появится раскрывающийся список

Однако попытка вызвать его через консоль не дает такого же результата. Вот попытки, которые, как я думал, приведут к раскрывающемуся списку. Ни один из них не работает.

1. Присвойте элементу ввода значение и щелкните по нему

   autoSuggestInput.value = 'c'
   autoSuggestInput.click()

Присвойте элементу ввода значение и щелкните его родительский элемент

 autoSuggestInput.value = 'c'
 autoSuggestWrapper.click()

Установка фокуса и нажатие

  autoSuggestInput.value = 'c'
  autoSuggestInput.focus()
  autoSuggestWrapper.click()

Установка значения и отправка события изменения для этого элемента

  autoSuggestInput.value = 'c'
  autoSuggestInput.dispatchEvent(new Event('change'),{ bubbles: true })

Что здесь не так, почему этим нельзя управлять с помощью JS?

Вот ссылки на демонстрационный сайт: демонстрационная страница и код