React event onMouseLeave not triggered when moving cursor fast

seems to be an issue caused by event delegation when the event listener is on the parent element and child elements are being conditionally added/removed from the DOM. putting a “hover target” component that sits on top of everything should make this work properly, but could cause other issues if you need to click elements inside.

<Container isOpen={this.state.isOpen}>
 <HoverTarget
  onMouseEnter={e => this.mouseOver(e)}
  onMouseLeave={e => this.mouseOut(e)}
 />
 <Content/>
</Container>



mouseOver(e) {
  if (!this.state.isOpen) {
    this.setState({ isOpen: true });
  }
}