如何解决“在StrictMode中弃用了findDOMNode”错误？

当我单击触发抽屉打开的按钮时，在控制台中出现“ findDOMNode在StrictMode中已弃用”

这是按钮组件容器，按钮组件名为Sidenav

import Sidenav from './Sidenav';


function Header() {
    return (
        <div className="header">
                    <div>
                        <Sidenav />
                    </div>
            </div>
        </div>
    );
}

export default Header;

这是Sidenav组件

import React, { useState } from 'react';
import clsx from 'clsx';

import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import List from '@material-ui/core/List';
import MenuRoundedIcon from '@material-ui/icons/MenuRounded';

//sidenav width and styles
const useStyles = makeStyles({
    list: {
        width: 200
    },
    fullList: {
        width: 'auto'
    }
});

function Sidenav() {
    // Functionality for sidenav
    const classes = useStyles();
    const [ state, setState ] = useState({
        right: false
    });

    const toggleDrawer = (anchor, open) => (event) => {
        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
            return;
        }

        setState({ ...state, [anchor]: open });
    };

    // Links go here
    const list = (anchor) => (
        <div
            className={clsx(classes.list, {
                [classes.fullList]: anchor === 'top' || anchor === 'bottom'
            })}
            role="presentation"
            onClick={toggleDrawer(anchor, false)}
            onKeyDown={toggleDrawer(anchor, false)}
        >
            <List>
                {/* {[ 'Inbox', 'Starred', 'Send email', 'Drafts' ].map((text, index) => (
                    <ListItem button key={text}>
                        <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
                        <ListItemText primary={text} />
                    </ListItem>
                ))} */}
            </List>
            {/* <Divider /> */}
            <List>
                {/* {[ 'All mail', 'Trash', 'Spam' ].map((text, index) => (
                    <ListItem button key={text}>
                        <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
                        <ListItemText primary={text} />
                    </ListItem>
                ))} */}
            </List>
        </div>
    );

    return (
        <div>
            <button onClick={toggleDrawer('right', true)}>
                <MenuRoundedIcon />
            </button>
            <Drawer anchor={'right'} open={state['right']} onClose={toggleDrawer('right', false)}>
                {list('right')}
            </Drawer>
        </div>
    );
}

export default Sidenav;

这是单击Sidenav组件作为按钮时的控制台错误

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: 
    in div (created by Transition)
    in Transition (created by ForwardRef(Fade))
    in ForwardRef(Fade) (created by ForwardRef(Backdrop))
    in ForwardRef(Backdrop) (created by WithStyles(ForwardRef(Backdrop)))
    in WithStyles(ForwardRef(Backdrop)) (created by ForwardRef(Modal))
    in div (created by ForwardRef(Modal))
    in ForwardRef(Portal) (created by ForwardRef(Modal))
    in ForwardRef(Modal) (created by ForwardRef(Drawer))
    in ForwardRef(Drawer) (created by WithStyles(ForwardRef(Drawer)))
    in WithStyles(ForwardRef(Drawer)) (at Sidenav.js:69)
    in div (at Sidenav.js:65)
    in Sidenav (at Header.js:37)
    in div (at Header.js:36)
    in div (at Header.js:11)
    in div (at Header.js:10)
    in Header (at App.js:10)
    in div (at App.js:9)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

如何解决控制台错误？