Как использовать автозаполнение Downshift с Redux?

Question

Я хочу использовать автозаполнение Downshift с redux, но не могу понять, как использовать функции Dispatched в элементе Downshift. У меня две основные функции:

searchCityAutoComplete(searchText) - обрабатывает входное значение и отправляет результаты поиска (searchResults: state.sitesReducer.searchResults,)

onSelectCity(название города) - получает название города и отправляет его (selectedCity: state.sitesReducer.selectedCity,).

Я следил за этим примером и не могу понять, как интегрировать эти функции с Downshift, поэтому вот моя последняя попытка, спасибо.

import React from 'react';
import { connect } from 'react-redux';
import { searchCityAutoComplete, onSelectCity, toggleShowResults } from '../actions/sitesActions';
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Downshift from 'downshift';

import dataApi from '../actions/dataService';
const SearchAutocomplete = ({

    toggleShowResults,
    isShowResults,
    serachText, searchResults,
    onSelectCity,
    searchCityAutoComplete }) => {

    return (

        <div>
            <div className="form-group position-relative">
                <Downshift
                    onChange={selection => alert(`You selected ${selection.value}`)} // need to set onSelectCity function.

                >
                    {({
                        getInputProps,
                        getItemProps,
                        getLabelProps,
                        getMenuProps,
                        isOpen,
                        inputValue,
                        highlightedIndex,
                        selectedItem,
                    }) => (
                            <div>
                                <label {...getLabelProps()}>search</label>
                                <input {...getInputProps({
                                    placeholder: 'search cities',
                                })} onChange={(e) => { searchCityAutoComplete(e.target.value) }} />
                                <ul {...getMenuProps()}>
                                    {isOpen
                                        ? searchResults.map((item, index) => (
                                            <li
                                                {...getItemProps({
                                                    key: item.value,
                                                    index,
                                                    item,
                                                    style: {
                                                        backgroundColor:
                                                            highlightedIndex === index ? 'lightgray' : 'white',
                                                        fontWeight: selectedItem === item ? 'bold' : 'normal',
                                                    },
                                                })}
                                            >
                                                {item.value}
                                            </li>
                                        ))
                                        : null}
                                </ul>
                            </div>
                        )}
                </Downshift>,
            </div>
        </div>
    )
};

const mapStateToProps = state => {
    console.log(state)
    return {
        selectedCity: state.sitesReducer.selectedCity,
        searchResults: state.sitesReducer.searchResults,
        serachText: state.sitesReducer.serachText,
        isShowResults: state.sitesReducer.isShowResults,
    }
}

const mapDispatchToProps = dispatch => ({
    toggleShowResults: () => { dispatch(toggleShowResults()) },
    searchCityAutoComplete: (value) => { dispatch(searchCityAutoComplete(value)) },
    onSelectCity: (cityCode) => { dispatch(onSelectCity(cityCode)) },
})
export default connect(mapStateToProps, mapDispatchToProps)(SearchAutocomplete);