如何获取弹框的ref

Question

写了一个简单的弹框组件，在父组件中使用，大致如下

父组件

const parent: React.FC = () => {
    const ref = useRef<HTMLElement>(null);
    const [visible, setVisible] = useState<boolean>(false);

    const handleVisible = () => {
        .....
        setVisible(true);
    };

useEffect(() => {
    document.addEventListener("click", (e) => {
        if (ref.current) {
            setModalVisible(false)
        }
    })
}, [visible]);

return (
    <>
        <MyModal ref={ref} visible={visible} />
    </>
)
}

modal组件

interface MyModalProps {
    ref: any;
}

const MyModal: React.FC<MyModalProps> = (props) => {
    const { ref } = props

    return (
        <>
            <div ref={ref}>
                <div>hhhh</div>
            </div>
        </>
    )
}

我想要在父组件中使用弹框的ref，但是当父组件渲染完成后ref就确定了，当我点击按钮弹出弹框的时候ref并不会更新，因此父组件中获取到的ref为空，请问有没有什么办法能够获取实时的ref呢，也就是当我打开弹框的时候，ref能够更新