Trying to use event.stopPropagation() to separate mouse and touch events in React

I'm trying to create a top navigation menu using react-popper and react-router-dom.

Along the top navigation I have MenuItems, which, when hovered over, or tapped on a touch screen, expand with a popper component to show sub navigation items. You are only able to be redirected to another page via the sub navigation items. That's the current state of it

What I want to achieve is for mouse users to be able to immediately redirect via the MenuItem itself, if they so wish. But since phone/tablet users don't have that hover state, I want them not to redirect from the MenuItem and still just expand the sub nav options.

I decided to try and use event.stopPropagation() to seperate these two event handlers. But the onTouchStart event on the nested div is still bubbling up and triggering the click event as well.

  handleClick = () => {
    console.log("handleClick")
  }

  handleTouch = (event) => {
    console.log("handleTouch")
    event.stopPropagation();
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => {
      this.setState({
        hover: true
      })
    }, 150)
  }

  render() {
    const config = this.props.config

    return (
      <div
        onClick={this.handleClick}
        onMouseOver={this.handleClick}
        onFocus={this.handleClick}
      > <a href={config.href === '/' ? config.href : null} >
          <Manager>
            <Target style={{ position: 'relative' }}>
              <div onTouchStart={this.handleTouch}>
                {this.display(config, this.state.hover)}
              </div>
            </Target>
          </Manager>
        </a>
      </div>
    )
  }

I've also tried

  componentDidMount() {
    document.addEventListener('click', (event) => {
      event.stopPropagation();
    }, false)
  }

as someone said that events already bubble up from the document and bypasses any other stopPropagate(), but no luck there either.