TreeView в семантическом пользовательском интерфейсе (onClick на элемент списка)

Question

Я пытаюсь создать TreeView на основе List из semantic-ui-реагировать. У меня вопрос по расширению дерева. Я использую onClick для запуска расширения. Все работают для корневых элементов, но не работают для дочерних элементов дерева. Похоже, что щелчок мыши по дочернему элементу также вызывает то же событие для родительского элемента.

Когда я нажимаю на пункт 5, я вижу в консоли: Кликнул по элементу с id = 5 ListExampleTree получил щелчок мышью Кликнул по элементу с id = 2 ListExampleTree получил щелчок мышью

Что я делаю не так?

Вы можете найти мой класс ниже или рабочий фрагмент по ссылке - https://codesandbox.io/s/oq3wlxr5p5

import React, { Component } from "react";
import { List, Icon } from "semantic-ui-react";

class TreeNode extends Component {
  constructor(props) {
    super(props);
    this.state = {
      node: props.node,
      expanded: false
    };
  }

  componentDidMount() {
    this.setState({
      node: this.props.node,
      expanded: this.props.expanded
    });
  }

  onItemClick = (value) => {
    console.log('Clicked on item with id=' + value)
    this.setState({
      expanded: !this.state.expanded
    });
    this.props.onItemClick(value);
  };

  renderChildItems() {
    let { node } = this.state;
    if (!Array.isArray(node.childNodes) || !node.childNodes.length) {
      return <div />;
    }
    let nodesList = node.childNodes.map(node => {
      return (
        <TreeNode
          key={node.id}
          node={node}
          onItemClick={this.props.onItemClick}
        />
      );
    });
    return <List.List>{nodesList}</List.List>;
  }

  render() {
    let { node } = this.state;
    let icon = "triangle right";
    let childNodes = [];
    if (this.state.expanded) {
      icon = "triangle down";
      childNodes = this.renderChildItems();
    }
    return (
      <List.Item key={node.id} value={node.id} onClick={(event) => this.onItemClick(node.id)}>
        <Icon name={icon} />
        <List.Content>
          <List.Header>{node.text}</List.Header>
          <List.Description>{node.text}</List.Description>
          {childNodes}
        </List.Content>
      </List.Item>
    );
  }
}

let second3LevelNodes = [
  {
    id: "6",
    text: "item 6",
    childNodes: []
  },
  {
    id: "7",
    text: "item 7",
    childNodes: []
  }
];

let secondLevelNodes = [
  {
    id: "4",
    text: "item 4",
    childNodes: []
  },
  {
    id: "5",
    text: "item 5",
    childNodes: second3LevelNodes
  }
];

let firstLevelNodes = [
  {
    id: "1",
    text: "item 1",
    childNodes: []
  },
  {
    id: "2",
    text: "item 2",
    childNodes: secondLevelNodes
  },
  {
    id: "3",
    text: "item 3",
    childNodes: []
  }
];

class ListExampleTree extends Component {
  onItemClick = (value) => {
    console.log("ListExampleTree received click with mouse");
  };

  render() {
    let nodes = firstLevelNodes;
    if (!Array.isArray(nodes) || !nodes.length) {
      return (
        <div>
          <p>empty</p>
        </div>
      );
    }
    console.log(nodes);
    return (
      <List>
        {nodes.map(node => {
          return (
            <TreeNode
              key={node.id}
              node={node}
              onItemClick={this.onItemClick}
            />
          );
        })}
      </List>
    );
  }
}
export default ListExampleTree;