Выберите с помощью клавиш со стрелками в javascript Реагировать

Question

Я сделал поисковую систему сам, и мой клиент запрашивает выбор результатов поиска с помощью клавиш со стрелками и введите, чтобы выбрать. И я обнаружил, что форма ввода имеет атрибут onKeyDown в React, что круто, но DOM.focus () не работает в этом разделе. Пожалуйста, помогите

Вот мой реактивный компонент поисковой системы (используется Redux)

const CallType = store.getState().CallType
        const searchResult = () => {
            const filteredData = CallType.totalCallTypes.filter(item => {
                if (
                    item.name
                        .toLowerCase()
                        .includes(CallType.searchValue.toLowerCase())
                )
                    return item
                else return ''
            })
            const searchedOrder = (currentId, currentParentId) => {
                let searchedSelectedOrder = []
                let id = currentId
                let parent_id = currentParentId
                searchedSelectedOrder.unshift(parent_id, id)
                while (searchedSelectedOrder[0] !== 0) {
                    CallType.totalCallTypes.map(item => {
                        if (item.id === parent_id) {
                            searchedSelectedOrder.unshift(item.parent_id)
                            id = item.id
                            parent_id = item.parent_id
                        }
                        return item
                    })
                }
                store.dispatch(changeSelectedOrder(searchedSelectedOrder))
            }
            const parentRender = (parentId) => {
                let name = ''
                let checkParentId = parentId
                let found = false
                while (checkParentId !== 0) {
                    CallType.totalCallTypes.map(item => {
                        if (item.id === checkParentId) {
                            name = item.name + ' > ' + name
                            found = true
                            checkParentId = item.parent_id
                        }
                        return item
                    })
                    if (found === false) {
                        checkParentId = 0
                    }
                }               
                return name
            }
            if (filteredData.length !== 0) {
                return filteredData.map((item, iteration) => {
                    if (iteration < 6) {
                        return (
                            <span
                                className='d-block searchItem'
                                id={'item0'}
                                key={iteration}
                                onClick={() => searchedOrder(item.id, item.parent_id) }
                            >
                                {parentRender(item.parent_id) + item.name}
                            </span>
                        )
                    } else {
                        return ''
                    }
                })
            } else {
                return 'No result found!'
            }
        }
        const InputActions = {
            onKeyPress(event) {
                if (event.key === 'ArrowDown')
                    document.getElementById('item0').focus()
            },
            onChange (event) {
                store.dispatch(changeSearchValue(event.target.value))
                const searchResultDiv = document.getElementById('searchResult')
                if (event.target.value === '') {
                    searchResultDiv.style.display = 'none'
                } else {
                    searchResultDiv.style.display = 'block'
                }
            },
            onBlur () {
                const searchResultDiv = document.getElementById('searchResult')
                setTimeout(() => {
                    searchResultDiv.style.display = 'none'
                }, 100)
            }
        }
        return (
            <Fragment>
                <input
                    type='text'
                    className='form-control form-control-sm'
                    id='searchInput'
                    onKeyDown={InputActions.onKeyPress}
                    onChange={InputActions.onChange}
                    onBlur={InputActions.onBlur}
                    placeholder='Хайх'
                />
                <div className='searchResult shadow' id='searchResult'>
                    {searchResult()}
                </div>
            </Fragment>
        )