React chakra ui画布宽度和高度初始化为零，无法渲染？

import React, { useEffect, useRef } from 'react';
import { Box } from '@chakra-ui/react';

const CanvasComponent = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    if (canvasRef.current) {
      const canvas = canvasRef.current;
      const context = canvas.getContext('2d');
      // 在这里进行画布的绘制操作
    }
  }, []);

  return (
    <Box ref={canvasRef} width="100%" height="100vh" backgroundColor="gray.200">
      {/* 画布内容 */}
    </Box>
  );
};

export default CanvasComponent;

import React from 'react';
import { Box } from '@chakra-ui/react';

const CanvasComponent = () => {
  return (
    <Box width="100%" height="100vh" backgroundColor="gray.200">
      {/* 画布内容 */}
    </Box>
  );
};

export default CanvasComponent;

import React, { useState, useEffect } from 'react';
import { Box } from '@chakra-ui/react';

const CanvasComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 模拟异步数据加载
    setTimeout(() => {
      setData({ /* 加载的数据 */ });
    }, 1000);
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <Box width="100%" height="100vh" backgroundColor="gray.200">
      {/* 使用数据进行画布绘制 */}
    </View>
  );
};

export default CanvasComponent;