Получить ширину элемента, сразу, при рендере компонента

Помогите разобраться пожалуйста.

У меня в приложении есть элемент(A) который рассчитывает свою ширину в зависимости от ширины другого элемента(B), но при рендере, ширина того элемента(B) вычисляется как 0 и соответственно размер элемента (A) рассчитывается не правильно, каждый раз когда компонент рендерится. Но если вручную изменить ширину окна, то начинает работать корректно.

использую данный хук useResize

import React, { useCallback, useEffect, useState } from "react";

export const useResize = (myRef) => {
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);

  const handleResize = useCallback(() => {
    setWidth(myRef.current.offsetWidth);
    setHeight(myRef.current.offsetHeight);
  }, [myRef]);

  useEffect(() => {
    console.log(width);
    window.addEventListener("load", handleResize);
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("load", handleResize);
      window.removeEventListener("resize", handleResize);
    };
  }, [myRef, handleResize]);
  return { width, height };
};

Сам код

import "./styles.css";
import React, { useState, useRef, useEffect } from "react";

import { useResize } from "./useResuze";
export default function App() {
  const componentRef = useRef();
  const { width, height } = useResize(componentRef);
  return (
    <div ref={componentRef} className="App">
      <p>width: {width}px</p>
      <p>height: {height}px</p>
    </div>
  );
}

codeSandBox

Видео с Google диска https://drive.google.com/drive/folders/1R8cNaUGDte-i2zN-IRo-RbZs1I_yeA83?usp=sharing