React how to call child function?

Use the "useImperativeHandle"

Parent file:

import {useRef,useEffect} from 'react'
import RankingPopup from '@/components/popups/Ranking'

export default function(){

    const RankingPopupRef = useRef(null)

    useEffect(()=>{
        RankingPopupRef.current.open()
    },[])
    return <RankingPopup ref={RankingPopupRef} />
}

Child file:

import * as React from 'react'

export default React.forwardRef(({
    data=[],
    self={}
},ref)=>{

    React.useImperativeHandle(ref,()=>({
        open(){
            console.log("called child function")
        }
    }))

    return "child fun"
})