Как продолжать показывать «всплывающее окно» при наведении курсора на якорь и «всплывающее окно»?

Вот в этом примере material-uihttps://material-ui.com/utils/popover/#mouse-over-interaction

Выполните следующие действия для примера material-uihttps://material-ui.com/utils/popover/#mouse-over-interaction

1. В приведенном выше примере держите мышь на тексте Hover with a Popover. --- вы видите popover

2. Попробуйте подвести указатель мыши к popover --- popover исчезает, верно? Но я хочу показать всплывающее окно, даже если я наведу курсор на popover

И сделайте так, чтобы всплывающее окно исчезало только в том случае, если пользователь не зависает ни на popover, ни на Hover with a Popover. (в основном anchorEl)

Я копирую код из их демо

  import React from 'react';
    import PropTypes from 'prop-types';
    import Popover from '@material-ui/core/Popover';
    import Typography from '@material-ui/core/Typography';
    import { withStyles } from '@material-ui/core/styles';

    const styles = theme => ({
      popover: {
        pointerEvents: 'none',
      },
      paper: {
        padding: theme.spacing.unit,
      },
    });

    class MouseOverPopover extends React.Component {
      state = {
        anchorEl: null,
      };

      handlePopoverOpen = event => {
        this.setState({ anchorEl: event.currentTarget });
      };

      handlePopoverClose = () => {
        this.setState({ anchorEl: null });
      };

      render() {
        const { classes } = this.props;
        const { anchorEl } = this.state;
        const open = Boolean(anchorEl);

        return (
          <div>
            <Typography
              aria-owns = {open ? 'mouse-over-popover' : undefined}
              aria-haspopup = "true"
              onMouseEnter = {this.handlePopoverOpen}
              onMouseLeave = {this.handlePopoverClose}
            >
              Hover with a Popover.
            </Typography>
            <Popover
              id = "mouse-over-popover"
              className = {classes.popover}
              classes = {{
                paper: classes.paper,
              }}
              open = {open}
              anchorEl = {anchorEl}
              anchorOrigin = {{
                vertical: 'bottom',
                horizontal: 'left',
              }}
              transformOrigin = {{
                vertical: 'top',
                horizontal: 'left',
              }}
              onClose = {this.handlePopoverClose}
              disableRestoreFocus
            >
              <Typography>I use Popover.</Typography>
            </Popover>
          </div>
        );
      }
    }

    MouseOverPopover.propTypes = {
      classes: PropTypes.object.isRequired,
    };

    export default withStyles(styles)(MouseOverPopover);

Какое изменение кода мне нужно сделать здесь? Вы можете поэкспериментировать https://codesandbox.io/s/6l3wk6kv3