Событие onMouseLeave в пользовательском интерфейсе компонента Popover.

Question

import React from 'react'
import PropTypes from 'prop-types'
import config from 'react-global-configuration'
import classNames from 'classnames'

import styles from './styles'

import Popover from '@material-ui/core/Popover'
import Typography from '@material-ui/core/Typography'

import HomeIcon from 'icons/Home'
import Circle from 'icons/Circle'

import withStyles from 'hoc/withStyles'

import AnimatedEntrance from 'components/AnimatedEntrance'
import Divider from 'components/Divider'
import ButtonBase from 'components/Button/Base'
import GameBox from 'components/Games/Box'
import Count from 'components/Games/Count'

class NavigationBar extends React.Component {
  myRef = React.createRef()
  name = ''

  state = {
    item: null
  }

  handlePopoverOpen = (event, name) => {
    this.setState({ item: name })
    this.name = name
  }
  handlePopoverClose = () => {
    this.setState({ item: null })
  }

  render () {
    const menu = config.get('navigation.bar')
    const slots = config.get('navigationBar.slots')
    const { classes, location } = this.props
    const { item } = this.state
    const open = Boolean(item)
    return (
      <AnimatedEntrance>
        <div className={classes.container}>
          <div
            ref={this.myRef}
            className={classes.buttons}
            onMouseLeave={(e) => this.handlePopoverOpen(e, this.name)}
          >

            <ButtonBase
              className={location.pathname === '/' ? classes.active : classes.buttonHomeContainer}
              variant='text'
              to='/'

            >
              <HomeIcon />
            </ButtonBase>

            <Divider className={classes.divider} />

            {menu.map((element) => (
              <React.Fragment
                key={element.name}
              >
                <div
                  onMouseEnter={(e) => this.handlePopoverOpen(e, element.name)}
                  onMouseLeave={this.handlePopoverClose}
                >
                  <ButtonBase
                    className={
                      element.url === location.pathname
                        ? classNames(classes.active, classes.buttonHomeContainer)
                        : classes.buttonHomeContainer
                    }
                    value={element.name}
                    variant='text'
                    to={element.url}
                  >
                    <Typography variant={'body2'} className={classes.flex}>
                      {element.name}
                      {element.name === 'Promo Page' ? <Circle /> : null}
                    </Typography>
                  </ButtonBase>
                </div>
                <Divider className={classes.divider}/>
              </React.Fragment>
            ))}
          </div>
          <div>
            {
              menu.map((element) => {
                if (element.name === item) {
                  return (
                    <Popover
                      key={element.name}
                      className={classes.popover}
                      classes={{
                        paper: classes.paper
                      }}
                      open={open}
                      anchorEl={this.myRef.current}
                      anchorOrigin={{
                        vertical: 'bottom',
                        horizontal: 'left'
                      }}
                      transformOrigin={{
                        vertical: 'top',
                        horizontal: 'left'
                      }}
                      disableRestoreFocus
                      hideBackdrop
                      onMouseLeave={this.handlePopoverClose}
                    >
                      {slots.map((entity, index) => {
                        return (<GameBox
                          element={entity}
                          isDivider={index % 3 === 0 && index !== 0}
                        />)
                      })}
                      <Count
                        count={slots.length}
                        to={'/slots'}
                        sectionName={element.name}
                      />
                    </Popover>
                  )
                }
              })
            }
          </div>
        </div>
      </AnimatedEntrance>
    )
  }
}

NavigationBar.propTypes = {
  classes: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired
}

export default withStyles(styles)(NavigationBar)

Этот фрагмент кода описывает некоторое меню.У каждой кнопки этого меню есть событие onMouseEnter, которое открывается Popover (компонент пользовательского интерфейса материала).Когда я перехожу к этому поповеру (1 он не активен), я не могу ничего там щелкнуть, а второй, когда я пытаюсь вызвать onMouseLeave на этом элементе Popover, он также не дает никакой реакции.Почему это происходит?А кто-нибудь знает, как это исправить?Я провел 2 дня в поисках, но я не нашел ничего, чтобы решить эту проблему.Пожалуйста, где-то существует ответ, дайте мне знать.Если мое объяснение недостаточно ясное, пожалуйста, не стесняйтесь спросить меня дополнительную информацию