React compute children's total width using useRef - reactjs

Question

How do I compute the children's total width using React's useRef? What I want to achieve is to access each child's property including ref. Note that each Child's component has different width. I have a codesandbox here.
import React from "react";
const ComputeWidth = ({ children }) => {
let totalWidth = 0;
const newChildren = React.Children.map(children, element => {
const newProps = {
...element.props,
additionalProp: 1234
};
// I WANT TO ACCESS CHILD'S WIDTH HERE
// element.ref is null
// totalWidth += element.ref.current.offsetWidth???
return React.cloneElement(element, newProps);
});
return <div>{newChildren}</div>;
};
export const Child = ({ label }) => label;
export default ComputeWidth;

Answer 1

I was able to answer this. However, I am not sure if passing a ref to a prop is a good approach. Codesandbox here.
import React, { useState, useRef, useEffect } from "react";
const ComputeWidth = ({ children }) => {
const [totalWidth, setTotalWidth] = useState(0);
const els = React.Children.map(children, useRef);
const newChildren = React.Children.map(children, (element, i) => {
const newProps = {
...element.props,
additionalProp: 1234,
el: els[i]
};
return <element.type ref={els[i]} {...newProps} />;
});
useEffect(() => {
setTotalWidth(
newChildren.reduce(
(pv, cv) => pv.ref.current.offsetWidth + cv.ref.current.offsetWidth
)
);
}, []);
return (
<div>
{newChildren}
<div>Width is {totalWidth}</div>
</div>
);
};
export const Child = ({ label, el }) => (
<div ref={el} style={{ display: "inline" }}>
{label}
</div>
);
export default ComputeWidth;