Material-UI - всплывающая подсказка остается открытой при наведении курсора

Question

У меня проблемы с созданием всплывающей подсказки.Во всплывающей подсказке должна быть кнопка, с помощью которой можно открыть поповер.У меня проблема в том, что когда я открываю поповер, он закрывает всплывающую подсказку.Всплывающее окно также отображается за всплывающей подсказкой.

<Tooltip
    interactive
    title={<Content />}
    placement="right-start"
>

Содержимое:

return (
    <div>
      <Button
        aria-owns={open ? 'simple-popper' : undefined}
        aria-haspopup="true"
        variant="contained"
        onClick={this.handleClick}
      >
        Open Popover
      </Button>
      <Popover
        id="simple-popper"
        open={open}
        anchorEl={anchorEl}
        onClose={this.handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
      >
          The content of the PopoverThe content of the the Popover.The content of the PopoverThe content of the the Popover.The content of the PopoverThe content of the the Popover.</Typography>
      </Popover>
    </div>
  );

РЕДАКТИРОВАТЬ: создается песочница для кода https://codesandbox.io/s/6w26o2ww0z