How to get element height and width from ReactNode?

I have a dynamic component in which I pass in children as prop. So the props look something like:

interface Props {
   ...some props
   children: React.ReactNode
}

export default Layout({...some props, children}: Props) {...}

I need to access the size of the children elements (height and width), in the Layout component. Note that the children are from completely different components and are non-related.

I can use the Layout component as follow:

<Layout ...some props>
  <Child1 /> // I need to know the height and width of this child
  <Child2 /> // as well as this child
  <Child3 /> // and this child.
</Layout>

How can I do so dynamically? Do I somehow have to convert ReactNode to HTMLDivElement? Note that there is no way I can pass in an array of refs as a prop into Layout. Because that the pages which use Layout are dynamically generated.