React child element re-render on parent component resize (due to window resize)

Question

This is my first React project and I'm struggling with getting a component to resize after the window is resized. For this project I am creating a custom extension in Airtable. I am unsure if I have the right understanding of the parent/child relationship here. But anyway, this works perfectly for when the app initially renders, the child component is the same size as the parent component. However, when I resize the window, the parent component adjust along with everything else, but the child component does not change when the parent component changes.

export default function ThisIsAReactComponent(props) {
  const refContainer = useRef();
  const [dimensions, setDimensions] = useState({
    width: 0,
    height: 0,
  });

  useEffect(() => {
    if (refContainer.current) {
      setDimensions({
        width: refContainer.current.offsetWidth,
        height: refContainer.current.offsetHeight,
      });
    }
  }, []);

  return (
    <>
      <ThisIsAChildComponent
        table={props.table}
        height={dimensions.height ? dimensions.height - 10 : "100%"}
      />

      <Box ref={refContainer} width="100%" height="100%">
        <ThisIsTheParentComponent
          datas={aFunction(props.table)[0].Data}
          records={aFunction(props.table)[0].Records}
          heading={"A Heading"}
          pad={2}
          table={props.table}
        />
      </Box>
    </>
  );
}

I have tried making the height a key in the child component but it still doesn't make it re-render. I have been trying to find a solution, but so far have been unable to get it to work properly. Any help would be greatly appreciated!