如何在React Konva中实现Tranformer矩形的dragBounfunc，boundBoxFunc？

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

const App = () => {
  const [rectProps, setRectProps] = React.useState({
    x: 100,
    y: 100,
    width: 200,
    height: 100,
  });

  const handleDragEnd = (e) => {
    setRectProps({
      ...rectProps,
      x: e.target.x(),
      y: e.target.y(),
    });
  };

  const handleTransformEnd = (e) => {
    const node = e.target;
    const scaleX = node.scaleX();
    const scaleY = node.scaleY();

    // Limit the minimum and maximum width and height
    const minWidth = 50;
    const maxWidth = 500;
    const minHeight = 50;
    const maxHeight = 300;

    const width = Math.max(minWidth, Math.min(maxWidth, node.width() * scaleX));
    const height = Math.max(minHeight, Math.min(maxHeight, node.height() * scaleY));

    setRectProps({
      ...rectProps,
      width,
      height,
      scaleX: 1,
      scaleY: 1,
    });
  };

  const handleDragBoundFunc = (pos) => {
    const stage = pos.target.getStage();
    const { width, height } = stage.size();

    // Limit the drag movement within the stage
    const x = Math.max(0, Math.min(width - rectProps.width, pos.x));
    const y = Math.max(0, Math.min(height - rectProps.height, pos.y));

    return { x, y };
  };

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Rect
          {...rectProps}
          draggable
          onDragEnd={handleDragEnd}
          onTransformEnd={handleTransformEnd}
        />
        <Transformer
          boundBoxFunc={(oldBox, newBox) => {
            // Limit the minimum and maximum width and height during transformation
            const minWidth = 50;
            const maxWidth = 500;
            const minHeight = 50;
            const maxHeight = 300;

            const width = Math.max(minWidth, Math.min(maxWidth, newBox.width));
            const height = Math.max(minHeight, Math.min(maxHeight, newBox.height));

            return { ...newBox, width, height };
          }}
          dragBoundFunc={handleDragBoundFunc}
        />
      </Layer>
    </Stage>
  );
};

export default App;