Modal embedded forms are used in react antd, but the child DOM inside modal cannot be fetched by using ref

first is a parent component that contains a modal

import React from "react";
import { Button, Input, Table, Modal } from "antd";

import ApplyCertificateForm from "./components/apply-certificate-form";
import UploadCertificateFrom from "./components/upload-certificate-form";

const Search = Input.Search;


export default class SecCertificateList extends React.Component{
    constructor(props){
        super(props);
        this.applyFormElement=React.createRef();
        this.aa="222222222";
    }
   
    state = {
        apply_visible: false,
        upload_visible:false
    };
    componentDidMount() {
        console.log("11111111111")
        console.log(this.applyFormElement);
    }
    showModal=(name,e)=>{
        let title=name+"_visible";
        this.setState({
            [title]:true,
        });
        console.log(this.applyFormElement)
        //
        // this.applyFormElement.current.resetFields();
    };
    handleCancel = (name,e) => {
        console.log(e);
        this.setState({
            [name+"_visible"]: false,
        });
    };

    handleOk = (name,e) => {
        console.log(e);
        this.setState({
            [name+"_visible"]: false,
        });
    }

    render(){
        return (
            <div>
                <Button type="primary" onClick={this.showModal.bind(this,"apply")}></Button>
              
                <Modal
                    title=""
                    visible={this.state.apply_visible}
                    onOk={this.handleOk.bind(this,"apply")}
                    onCancel={this.handleCancel.bind(this,"apply")}
                    // footer={[
                    //     <Button key="back" onClick={this.handleCancel.bind(this,"apply")}></Button>,
                    //     <Button key="submit" type="primary" onClick={this.handleOk.bind(this,"apply")}>
                    //         
                    //     </Button>,
                    // ]}
                    okText={""}
                    cancelText={""}
                    destroyOnClose={true}
                >
                    <div ref={this.applyFormElement}>11111111111{this.aa}</div>
                    <ApplyCertificateForm  ref={this.applyFormElement}/>
                </Modal>
            </div>
        )
    }
}

as shown in the code, I added another < ApplyCertificateForm / > to the modal tag, which I hope to get in the entire parent component, but I add ref= {this.applyFormElement} in the parent component

componentDidMount() {
        console.log("11111111111")
        console.log(this.applyFormElement);
    }

{current:null} is printed in

, why can"t you get this component?