ReactJS: функция onClick из реквизита не работает для элемента li

Question

Здравствуйте. Я передаю функцию onLocationSelect компоненту, называемому DropDownSearch, через реквизиты, однако всякий раз, когда я пытаюсь щелкнуть по элементам li, onLocationSelect не вызывается ...

Будет ли div в элементе li в смысле "покрывать" элемент li от нажатия? или здесь другая ошибка при игре?

// CreateGame.js

onLocationSelect(location) {
    this.setState({ selectedLocation: location });
    console.log(location);
}

render() {
    return (
        <h3>Location</h3>
        <div className="create-game-inputs">
            <DropDownSearch
                fetchYelpBusinesses={yelpSearch}
                location={this.state.location}
                yelpSearchResults={this.props.yelpSearchResults}
                onLocationSelect={this.onLocationSelect}
            />
        </div>
    )

}



// DropDownSearch.js

renderSearchResults(results) {
    return results.map(item => {
        return (
            <li
                name="dds-item"
                key={item.id}
                onClick={() => this.props.onLocationSelect(item)}
            >
                <div className="dds-item-img">
                    <img src={item.image_url} alt={item.name} />
                </div>
                <div className="dds-item-info">
                    <div className="dds-item-name">{item.name}</div>
                    <div className="dds-item-address">
                        {item.location.address1},{item.location.city},
                        {item.location.state}
                    </div>
                </div>
            </li>
        );
    });
}

render() {
    return (
        <div className="dds-search-wrapper">
            <input
                name="searchTerm"
                type="search"
                value={this.state.searchTerm}
                onChange={this.onSearchChange}
                onFocus={this.onSearchFocus}
                onBlur={this.onSearchBlur}
                autoComplete="off"
            />

            {this.props.yelpSearchResults &&
                this.state.listOpen && (
                    <ul className="dds-list">
                        {this.renderSearchResults(
                            this.props.yelpSearchResults
                        )}
                    </ul>
                )}

            <input
                name="location"
                type="search"
                value={this.state.location}
                onChange={this.onLocationChange}
            />
        </div>
    );
}