how can I get the initial width and height of an element in a React functional component

I am trying to add and remove rows and columns, with the corresponding sizees of the elements added within them. It works for the most part, however, when I first open the application instead of giving me the sizes of the elements, i.e 100px x 300px , it gives me undefinedpx x undefinedpx . After a minute or two of me saving my code it’ll change into the desired sizes I want, but initially it gives me undefined. Typescript is telling me that the div element I am referencing to is either of type Element | null , however this is not suited for resizeObserver.observe(div!);, because it’s type is just Element, unless I put it in an if else statement, but still I dont know what to do with that undefined value and why the measurements are showing up delayed.

import Burger from "./icons/Burger";
import { useState, useEffect, useRef } from "react";
import "./App.scss";

const App = (): JSX.Element => {
  const [rows, setRows] = useState<number>(0);
  const [columns, setColumns] = useState<number>(0);
  const [sidebar, setSidebar] = useState<boolean>(true);
  const [height, setHeight] = useState<number>();
  const [width, setWidth] = useState<number>();
  const elementRef = useRef(null);

  useEffect(() => {
    const div = document.querySelector(".viewport");
    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        setHeight(Math.ceil(entry.contentRect.width));
        setWidth(Math.ceil(entry.contentRect.height));
      }
    });

    if (!div) {
      return;
    } else {
      resizeObserver.observe(div!);
    }
  }, [height, width]);

  const handleRowCount = (int: number) => {
    setRows(int);
  };
  const handleColumnCount = (int: number) => {
    setColumns(int);
  };

  const handleSidebar = (boolean: boolean) => {
    setSidebar(boolean);
  };

  let totalBoxes = Array.from({ length: rows * columns });
  let boxesArr = Object.keys(totalBoxes);

  return (
    <div className="app-container">
      <Burger
        rowCount={handleRowCount}
        columnCount={handleColumnCount}
        sidebarState={handleSidebar}
      />

      <div
        id="grid"
        style={{
          gridTemplateColumns: `repeat(${columns}, 1fr)`,
          width: sidebar ? "calc(100vw - 100px)" : "calc(100vw - 200px)",
        }}
      >
        {boxesArr.map((_, index) => (
          <div key={index} className="viewport" ref={elementRef}>
            {`${height}px x ${width}px`}
          </div>
        ))}
      </div>
    </div>
  );
};

export default App;