material-ui - Material-UI/app-bar/#back-to-top-findDOMNode は StrictMode で非推奨になりました。findDOMNode に、StrictMode 内にある Transition のインスタンスが渡されました

Question

material-ui back to top ( 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>
  );
}

私は反応するのが初めてで、解決策について知りません（代わりに、要素に直接参照を追加してください）。

どうすればこれを修正できますか? 君たちありがとう