如何在react konva中创建此自定义形状

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

const CustomShape = () => {
  const shapeProps = {
    x: 100, // 形状的x坐标
    y: 100, // 形状的y坐标
    width: 200, // 形状的宽度
    height: 100, // 形状的高度
    fill: 'red', // 形状的填充颜色
  };

  return (
    <Shape
      sceneFunc={(context, shape) => {
        context.beginPath();
        context.moveTo(0, 0); // 移动到起始点
        context.lineTo(shape.width(), 0); // 绘制直线
        context.lineTo(shape.width(), shape.height()); // 绘制直线
        context.lineTo(0, shape.height()); // 绘制直线
        context.closePath();
        context.fillStrokeShape(shape);
      }}
      {...shapeProps}
    />
  );
};

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <CustomShape />
      </Layer>
    </Stage>
  );
};