找不到react html元素引用的宽度和高度

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const elementRef = useRef(null);

  useEffect(() => {
    if (elementRef.current) {
      const width = elementRef.current.offsetWidth;
      const height = elementRef.current.offsetHeight;
      console.log('宽度：', width);
      console.log('高度：', height);
    }
  }, []);

  return <div ref={elementRef}>Hello, World!</div>;
}

import React from 'react';
import styled from 'styled-components';

const MyDiv = styled.div.attrs((props) => ({
  width: props.width || 0,
  height: props.height || 0,
}))`
  /* 样式定义 */
`;

function MyComponent() {
  const handleRef = (ref) => {
    if (ref) {
      const width = ref.offsetWidth;
      const height = ref.offsetHeight;
      console.log('宽度：', width);
      console.log('高度：', height);
    }
  };

  return <MyDiv ref={handleRef}>Hello, World!</MyDiv>;
}

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const element = document.getElementById('myElement');
    if (element) {
      const styles = window.getComputedStyle(element);
      const width = parseFloat(styles.width);
      const height = parseFloat(styles.height);
      console.log('宽度：', width);
      console.log('高度：', height);
    }
  }, []);

  return <div id="myElement">Hello, World!</div>;
}