Get bounding box of group after render

Question

I'm trying to get the bounds of a group of Text objects so I can draw the line to the from the bottom corner of the text group.

I've tried to grab the bounds in a useLayoutEffect but I think it's running before it's been rendered, because the bounds are -infinity, infinity. However if I change something and save it, the bounds will console.log during the hot reload.

Here's a codesandbox with just the basics: https://codesandbox.io/s/kalo-ynf28f

This is my current code, the useLayout runs once, and at that point its Vector3 {x: -Infinity, y: -Infinity, z: -Infinity}, if I do something that triggers a hot reload I get Vector3 {x: -2.2533691406250003, y: 4.3, z: 0.6917509191176471} because it has been rendered and has a size (i think):

const CalloutLineDot = ({hawaiianName, englishTranslation, textPosition, dotPosition}) => {
  const groupRef = useRef();
  const [boundingBox, setBoundingBox] = useState(null);

  const label = <CalloutText hawaiianName={hawaiianName} englishTranslation={englishTranslation} position={textPosition} groupRef={groupRef} />
  const dot = <Sphere args={[.08,32]} position={dotPosition} material-color="hotpink"/>

  // Get bounds
  useLayoutEffect(() => {
    if (groupRef.current) {
      const bounds = new Box3().setFromObject(groupRef.current);
      debugger
      setBoundingBox(bounds);
      console.log(bounds);
    }
  }, []);