Wait for an array to be built by sibling in React

I have a Parent component:

function Parent() {
  let lst = [];
  let refs = [];
  for (var i = 0; i < 50; i++)
    lst.push(i);
  return <><Child1 lst={lst} refs={refs} /> <Child2 refs={refs} /> </>;
}

Child1 Component:

async function createRef(refs) {
  await sleep(3000);
  let ref = React.createRef();
  refs.push(ref);
  return ref;
}

function Child1({ lst, refs }) {
  return <>{lst.map(item => <div ref={createRef(refs)}>{`This is item number ${item}`}</div>)}</>;
}

Child2 Component:

function Child2({ refs }) {
  useEffect(() => {
    // wait for refs[0] to be defined
    complexFunction(ref[0]) //this is undefined
  });
  return <></>;
}

In Child2 I'm receiving refs array that is controlled by Child1, in Child1, refs is built asynchronously. I want to wait for the refs to be built completely before calling complexFunction on refs[0].<br>
The only solution I got now is to pass complexFunction to Child1 and call it from there, but I don't prefer this solution because in my real app it takes a lot of infrastructural changes.<br>
I also can wait for a few hundreds ms before calling complexFunction but it's also not a preferred solution.<br>
I tried to changed refs to a state variable, set it in Child1 and check if it's defined in Child2 before calling complexFunction, but it triggered infinite loop of setState/renders.

The logic in <Child2/> should be moved into the parent since the parent is responsible for orchestrating the children.

Adding something like this to the parent should be helpful.

  //you should track async functions with a loading flag
  //it really helps with debugging and have a clean UI
  //The UI is likely odd looking or broken while
  //complexFunction runs.
  const [loading,setLoading] = useState(false);
  const [refList,setRefList] = useState([]);
  const addRefToList = ref => {
    complexFunction(ref);
    const newRefList = [...refList, ref]
    setRefList(newRefList);
    if (newRefList.length === lst.length) {
      complexFunction(newRefList[0]);
    }
  }

  return <>
   {loading && <LoadingIcon/> }
  ...
  <Child1 addRefToList={addRefToList} .../>
  ...
  </>

And make this change to <Child1/>

const Child1 = props => {
  const ref = useRef();
  useEffect(() => {
    props.addRefToList(ref);
  });
  return <div ref={ref}>{`This is item number ${props.item}`}</div>
}