Как использовать событие e.stopPropagation, когда я нажимаю родительский компонент?

Как убедиться, что щелчок не срабатывает в родительском компоненте, когда я щелкаю дочерний компонент в реакции?

Я пытаюсь использовать e.stopPropagation(), но когда я нажимаю на нее, я вижу эту ошибку

"TypeError: e.stopPropagation не является функцией"

Почему так происходит??

class ModuleGroup extends React.Component {
  constructor(props) {
    super(props);
    this.toggleHidden = this.toggleHidden.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      isVisible: false,
    };
  }

  toggleHidden() {
    this.setState({
      isVisible: !this.state.isVisible,
    });
  }

  handleClick(e) {
    // console.info("e.Target", e.currentTarget.textContent);
    console.info("e.Target", e);
    e.stopPropagation();
  }

  render() {
    return (
      <div
        onClick = {(e) => this.handleClick(this.props.id)}
        // onClick = {this.handleClick}
        className = "moduleGroup"
        onMouseEnter = {this.toggleHidden}
        onMouseLeave = {this.toggleHidden}
      >
        {this.props.id}
        <div
          value = {this.props.id}
          className = {`modulesSet ${this.state.isVisible && "visible"}`}
        >
          {this.props.modules &&
            this.props.modules.map((module) => (
              <Module key = {module.key} id = {module.key} />
            ))}
        </div>
      </div>
    );
  }
}