Mouse Event target parent всегда null

Я использую 3 компонента: Chip-input, autocomplete-input and item list. (Компоненты справа вложены в те, что слева).

Chip input добавляет слушатель клика на всю страницу. Он ищет родителя элемента, на которого был совершен клик (closest .autocomplete-input). Если кликнуть на предмет из item list компонента, то (event.target as Element).parentElement будет null! Это случается только с кликом на эти элементы. Как это работает!?

const pageOnClick = (e: MouseEvent) => {
    const domElem = e.target as Element;
    console.log(domElem.parentElement);
}

Код из Item list

getItemsToRender(): ReactElement[] {
    return this.props.items.map((item: string, index: number) => {
        if (this.state.focusedIndex == index)
            return (
                <span className="items-list__item items-list__item_focused" key={index}
                onClick={() => {this.focusAndSelect(index)}}
                ref={this.focusedRef}>{item}</span>
            );

        return (
            <span className="items-list__item" key={index}
            onClick={() => {this.focusAndSelect(index)}}>{item}</span>
        );
    });
}

render() {
    return (
       <div className="items-list">
           {this.getItemsToRender()}
       </div>
    );
}

Итоговая структура DOM: