How To create this custom shape in react konva

Hi I am new to react konva and trying to make a custom shape for my project I wanted to create the yellow element which is basically a trapezium with curved sides and should fit inside the red ring as shown in the image. Any help is much appreciated.

You can use Konva.Ring and Konva.Arc shapes for that.

import React from "react";
import { render } from "react-dom";
import { Stage, Layer, Arc, Ring } from "react-konva";

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Ring
          x={200}
          y={200}
          innerRadius={40}
          outerRadius={70}
          fill="red"
          stroke="black"
        />
        <Arc
          x={200}
          y={200}
          innerRadius={40}
          outerRadius={70}
          angle={60}
          rotation={-120}
          fill="yellow"
          stroke="black"
        />
      </Layer>
    </Stage>
  );
};

https://codesandbox.io/s/react-konva-arc-demo-yhkoh