material-ui - Material-UI/app-bar/#back-to-top-findDOMNode 在 StrictMode 中已弃用。findDOMNode 被传递了一个在 StrictMode 内的 Transition 实例

Question

我使用 material-ui 回到顶部（https://material-ui.com/components/app-bar/#back-to-top）来创建一个返回顶部菜单并且它工作正常但是问题是当我滚动时向下并出现返回顶部菜单我在控制台中收到警告：

index.js:1 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. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
    at div
    at Transition (http://localhost:3000/static/js/0.chunk.js:51673:30)
    at Zoom (http://localhost:3000/static/js/0.chunk.js:33379:24)
    at ScrollTop (http://localhost:3000/static/js/1.chunk.js:146:5)
    at BackToTop
    at div
    at O (http://localhost:3000/static/js/vendors~main.chunk.js:42558:6)
    at Contact
    at Suspense
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:35725:29)
    at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:35927:29)
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:35356:30)
    at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:34884:35)

我的代码是：

import Fab from '@material-ui/core/Fab';
import Zoom from '@material-ui/core/Zoom';
import { makeStyles } from '@material-ui/core/styles';
import useScrollTrigger from '@material-ui/core/useScrollTrigger';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';

const useStyles = makeStyles((theme) => ({
  root: {
    zIndex: (1),
    opacity: (.85),
    position: 'fixed',
    right: theme.spacing(2),
    bottom: theme.spacing(5),
  },
}));

function ScrollTop(props) {
  const { children, window } = props;
  const classes = useStyles();
  const trigger = useScrollTrigger({
    target: window ? window() : undefined,
    disableHysteresis: true,
    threshold: 100,
  });

  const handleClick = (event) => {
    const anchor = (event.target.ownerDocument || document).querySelector('#header');

    if (anchor) {
      anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  };

  return (
    <Zoom in={trigger}>
      <div onClick={handleClick} role="presentation" className={classes.root}>
        {children}
      </div>
    </Zoom>
  );
}

export default function BackToTop() {
  return (
    <ScrollTop>
      <Fab className="back-to-top" color="primary" size="small" aria-label="scroll back to top">
        <KeyboardArrowUpIcon />
      </Fab>
    </ScrollTop>
  );
}

我是新来的反应，我不知道它的建议解决方案（相反，直接向元素添加一个 ref）。

我该如何解决这个问题？感谢你们