Предупреждение консоли findDOMNode в пользовательском интерфейсе материала

Question

Я пытаюсь отобразить предупреждение с помощью пользовательского интерфейса материала. Я создал компонент, использующий forwardRef, как если бы он не использовался, он также выдает ошибку findDOMnode при рендеринге.

const AnnualMileageAlert = forwardRef( ( props, ref ) => {
  const classes = useStyles();
  const [open, setOpen] = useState( true );

  return (
    <div {...props} ref={ref} className={classes.root}>
      <Collapse in={open}>
        <Alert
          action={(
            <IconButton
              aria-label="close"
              color="inherit"
              size="small"
              onClick={() => {
                setOpen( false );
              }}
            >
              <CloseIcon fontSize="inherit" />
            </IconButton>
          )}
          variant="filled"
          severity="warning"
        >
          <strong>1000000</strong>
        </Alert>
      </Collapse>
    </div>
  )
} );


export default AnnualMileageAlert;

Это отображается в другом файле следующим образом:

const reference = createRef();

return (
    <form className={classes.root} noValidate autoComplete="off">
      <div className="alert">{data > 100 ? <AnnualMileageAlert ref={reference}/> : null}</div>

      ...
    </form>
  );

Когда я щелкаю значок, чтобы закрыть предупреждение, в консоли появляется предупреждение:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

Я думал, что использование forwardRef и передача ссылки должно сработать, но почему-то выдает предупреждение при закрытии предупреждения.