使用useImperativeHandle时父组件第一次没拿到子组件的问题

const childRef = useRef()
const item = [{
        name: 'XXXX',
        content: <RunningRecord cRef={childRef} />,
        handClick: childRef.current?.resizeChart
}]
return <>
    ……
    <li onClick={() => {
            setTimeout(() => {
                console.log('~~item.handClick',item.handClick)
                item.handClick?.()
            }, 200)
        }}
        key={item.name}>
        {item.name}
    </li>
    ……
    <RunningRecord cRef={childRef} />
</>

function RunningRecord({ cRef }) {
    ……
    useImperativeHandle(cRef,()=>({
        resizeChart:()=> {dosomething……}
    }))

const usageRecordData = [{
    name: 'XXXX',
    content: <RunningRecord cRef={childRef} />,
}]
useEffect(() => {
    usageRecordData[1].handClick = childRef.current?.resizeChart
})

import React, { useState, useRef } from 'react'
import ChildList from './ChildList'
export default () => {
    let parentRef = useRef(null)
    const [name, setName] = useState('li')
    return <div>
        <ChildList parentRef={parentRef} name={name}></ChildList>
        <button onClick={() => {
            console.log("parentRef", parentRef)
        }}>获取子组件</button>
    </div>
}

import React, { useImperativeHandle, forwardRef } from 'react'
export default forwardRef((props, ref) => {
    console.log("ref", ref)
    useImperativeHandle(ref, () => {
        return {
            childFn
        }
    })
    console.log(ref)
    const childFn = () => {
        console.log('子组件方法')
    }
    return <div>
        <div ref={ref} />
    </div>
})