如何根据设备大小/分辨率使Konva-React响应(缩放)画布？

import React, { useState, useEffect } from 'react';
import { Stage, Layer, Rect } from 'react-konva';

const App = () => {
  const [stageSize, setStageSize] = useState({ width: window.innerWidth, height: window.innerHeight });

  useEffect(() => {
    const handleResize = () => {
      setStageSize({ width: window.innerWidth, height: window.innerHeight });
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  const calculateScale = () => {
    const canvasWidth = 800; // 期望的画布宽度
    const canvasHeight = 600; // 期望的画布高度

    const scaleX = stageSize.width / canvasWidth;
    const scaleY = stageSize.height / canvasHeight;

    return Math.min(scaleX, scaleY);
  };

  const scale = calculateScale();

  return (
    <Stage width={stageSize.width} height={stageSize.height} scaleX={scale} scaleY={scale}>
      <Layer>
        <Rect width={800} height={600} fill="red" />
      </Layer>
    </Stage>
  );
};

export default App;