Подсказка всплывающей подсказки выдает ошибку при наведении курсора

Question

Я использую демонстрационный пример в своем приложении, просто чтобы проверить, работает ли он:

ArrowTooltip.js

import React from 'react';
import { any, node } from 'prop-types';
import Tooltip from '@material-ui/core/Tooltip';
import { makeStyles } from '@material-ui/styles';

function arrowGenerator(color) {
  return {
    '&[x-placement*="bottom"] $arrow': {
      top: 0,
      left: 0,
      marginTop: '-0.95em',
      width: '2em',
      height: '1em',
      '&::before': {
        borderWidth: '0 1em 1em 1em',
        borderColor: `transparent transparent ${color} transparent`,
      },
    },
    '&[x-placement*="top"] $arrow': {
      bottom: 0,
      left: 0,
      marginBottom: '-0.95em',
      width: '2em',
      height: '1em',
      '&::before': {
        borderWidth: '1em 1em 0 1em',
        borderColor: `${color} transparent transparent transparent`,
      },
    },
    '&[x-placement*="right"] $arrow': {
      left: 0,
      marginLeft: '-0.95em',
      height: '2em',
      width: '1em',
      '&::before': {
        borderWidth: '1em 1em 1em 0',
        borderColor: `transparent ${color} transparent transparent`,
      },
    },
    '&[x-placement*="left"] $arrow': {
      right: 0,
      marginRight: '-0.95em',
      height: '2em',
      width: '1em',
      '&::before': {
        borderWidth: '1em 0 1em 1em',
        borderColor: `transparent transparent transparent ${color}`,
      },
    },
  };
}

const useStylesArrow = makeStyles(theme => ({
  tooltip: {
    position: 'relative',
  },
  arrow: {
    position: 'absolute',
    fontSize: 6,
    '&::before': {
      content: '""',
      margin: 'auto',
      display: 'block',
      width: 0,
      height: 0,
      borderStyle: 'solid',
    },
  },
  popper: arrowGenerator(theme.palette.grey[700]),
}));

export function ArrowTooltip(props) {
  const { arrow, ...classes } = useStylesArrow();
  const [arrowRef, setArrowRef] = React.useState(null);

  return (
    <Tooltip
      classes={classes}
      PopperProps={{
        popperOptions: {
          modifiers: {
            arrow: {
              enabled: Boolean(arrowRef),
              element: arrowRef,
            },
          },
        },
      }}
      {...props}
      title={
        <React.Fragment>
          {props.title}
          <span className={arrow} ref={setArrowRef} />
        </React.Fragment>
      }
    >{props.children}</Tooltip>
  );
}

ArrowTooltip.propTypes = {
  title: node,
  children: node,
  anchorEl: any,
};

export default ArrowTooltip;

myComponent.js:

const statusText = (
  <div>
    <Typography
      variant="label"
      className={classNames(classes[colorClassName])}
    >
      <FormattedMessage id={`app.order.status.${componentStatus}`} />
    </Typography>
  </div>
);

return (
  <Grid container alignItems="center" justify="flex-end">
    {isError ? (
      <ArrowTooltip
        title={getFailureMessage(status, sendingState)}
      >
        {statusText}
      </ArrowTooltip>
    ) : statusText}
  </Grid>
)

Страница отображается правильно, но когда возникает ошибка, и я наведите курсор мыши на statusText, все исчезнет, ​​и я получу эту ошибку:

Uncaught TypeError: popper_js__WEBPACK_IMPORTED_MODULE_4__.default is not a constructor
    at Popper.js:116
    at Popper.js:133
    at commitAttachRef (react-dom.development.js:20219)
    at commitLayoutEffects (react-dom.development.js:22818)
    at HTMLUnknownElement.callCallback (react-dom.development.js:347)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:397)
    at invokeGuardedCallback (react-dom.development.js:454)
    at commitRootImpl (react-dom.development.js:22585)
    at unstable_runWithPriority (scheduler.development.js:643)
    at runWithPriority$2 (react-dom.development.js:11305)

Буду признателен за любые советы, как это исправить ...

    "@material-ui/core": "^4.4.2",
    "@material-ui/icons": "^4.4.1",
    "@material-ui/styles": "^4.4.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",