Дети не сообщают об изменении реквизита через Ref

У меня есть следующий компонент React:

import { useRef, useEffect, useState } from "react";

function Child({ containerWidth }) {
  console.info("CHILD", containerWidth);
  return <div>My parent's width is {containerWidth}px</div>;
}

export default function App() {
  const containerRef = useRef(null);
  const [containerWidth, setContainerWidth] = useState(null);
  const [width, setWidth] = useState(400);

  console.info("PARENT", containerWidth);

  useEffect(() => {
    if (containerRef.current) {
      setContainerWidth(containerRef.current.clientWidth);
    }
  }, [containerRef]);

  const handleWidth = () => setWidth(1000);

  console.info("width", width);

  return (
    <div ref = {containerRef} style = {{ width: width }}>
      <Child containerWidth = {containerWidth} />
      <button onClick = {handleWidth}>change my width</button>
    </div>
  );
}

Мне нужно, чтобы дети всегда были в курсе и перерисовывали всякий раз, когда изменяется ширина. Значение этого ref остается прежним, даже когда мы нажимаем кнопку, чтобы изменить ширину.

Я пытался вызвать функцию с помощью useCallback, но безуспешно, поскольку ссылка никогда не меняется.

 const getChild = useCallback(
    () => <Child containerWidth = {containerWidth} />,
    [containerWidth]
  );

(.....)

  return (
    <div ref = {containerRef} style = {{ width: width }}>
      {getChild()}
      <button onClick = {handleWidth}>change my width</button>
    </div>
  );