Как совместить функциональность с реагирующим компонентом и элементом <input>?

Question

Итак, у меня есть элемент ввода, работающий с клавишей ввода, который получает информацию от моего желаемого API. Я создал раскрывающийся список для автоматического завершения поискового запроса для более интуитивного восприятия.

Это жестко запрограммированный список автозаполнения, поэтому он должен немного облегчить этот процесс.

Мой элемент ввода:

            <div className="search-box">
                <div>
                    <input 
                    type="text"
                    className="search-bar"
                    placeholder="Search"
                    onChange={e => setQuery(e.target.value)}
                    value={query}
                    onKeyPress={search}
                    />
                </div>
            </div>

Тогда мой пользовательский компонент автозаполнения:

<AutoCompleteText items={cities} />

У меня вопрос, нужно ли создавать другой пользовательский компонент ввода с функциональностью AutoCompleteText или есть способ добавить эту функциональность к элементу ввода?

Вы можете лучше посмотреть здесь: https://github.com/jguinn124/weather_app

Любое предложение полезно.