Reactjs 物料界面中的findDOMNode控制台警告

我正在尝试使用材质UI显示警报。我已经使用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;

我认为通过使用forwardRef并传递引用应该是有效的，但出于某种原因，它在关闭警报时会抛出警告。

似乎这是自2018年以来已知的一个警告。。。。归功于。

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.