Helllo, I would like to ask eventhough its not related to next.js but more likely to react itself, how to access and read the data in useState from parent component, but in loop. Ehm basically I want in very top parent click a button and it would find all useStates from innerChildren three layers down and save those data to array, anyone know which hook or how to implement the thing is that amount of rows is always different based on inputed file

export default function ParentComponent(){

    const readAllChildrenData = () => {
        // read all data and store to array
        // call this function which will access all lineData useStates from all InnerChild03
    }

    return(<>
        <button onClick={readAllChildrenData}></button>
        <InnerChild01 rows={35}/>
        </>
    )
}

export default function InnerChild01({rows}){
    const halfLength = Math.ceil(rows / 2);
    const firstHalf = rows.slice(0, halfLength); // Slice from index 0 to halfLength 
  const secondHalf = rows.slice(halfLength); // Slice from halfLength to the end of the array

    return(<>
    {firstHalf.map((row) => (
        <InnerChild02 project={row}/>
        ))} 
        {secondHalf.map((row) => (
        <InnerChild02 project={row}/> 
        ))} 
        </>
    )
}


export default function InnerChild02({ project }) {
    const row = project;
    return (
        <>
          <InnerChild03 line_id_prop={0} project_name_prop={row} />
          <InnerChild03 line_id_prop={1} project_name_prop={row} />
          <InnerChild03 line_id_prop={2} project_name_prop={row} />
          <InnerChild03 line_id_prop={3} project_name_prop={row} />
        </>
      );
    }


    export function InnerChild03({ line_id_prop, project_name_prop }, ref) {
        const [lineData, setLineData] = useState({
          project_name: "",
          line_id: "",
          component_name: "",
        });
        return(
            //etc
        )
    }