当我单击触发抽屉打开的按钮时，我在控制台中的 StrictMode 中不推荐使用 findDOMNode

这是按钮组件容器，按钮组件名为 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)

如何修复控制台错误？