嵌套函数组件出现问题。 “不能为功能组件提供参考。”

Question

我正在尝试将Material-UI Modal和Fade API与reactstrap Card结合使用。我无法弄清楚为什么会引发以下警告。如果有人能指出正确的方向，我将不胜感激。

警告-

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Transition`.
    in Card (created by Transition)
    in Transition (created by ForwardRef(Fade))
    in ForwardRef(Fade) (created by TrapFocus)
    in TrapFocus (created by ForwardRef(Modal))
    in div (created by ForwardRef(Modal))
    in ForwardRef(Portal) (created by ForwardRef(Modal))
    in ForwardRef(Modal) (created by ForwardRef)
    in ForwardRef
    in ReactPlaceholder (created by AsyncFunc)
    in AsyncFunc (created by Context.Consumer)
    in Route (created by OnBoarding) ....

功能组件的代码。

import React from 'react';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import {Card, CardBody, CardHeader} from 'reactstrap';

const OnBoarding = ({match, history}) => {
    const [open, setOpen] = React.useState(true);

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <Modal
            aria-labelledby="transition-modal-title"
            aria-describedby="transition-modal-description"
            open={open}
            onClose={handleClose}
            closeAfterTransition
            disableBackdropClick
            disableEscapeKeyDown
            BackdropComponent={Backdrop}
            BackdropProps={{
                timeout: 500,
            }}
        >
            <Fade in={open}>
                <Card className="shadow border-0 w-75 d-flex on-boarding">
                    <CardHeader className="bg-primary text-white">
                       Card Header
                    </CardHeader>
                    <CardBody>                    
                      Card Body 
                    </CardBody>
                </Card>
            </Fade>
        </Modal>
    );
}