React Konva Rotation/Revolution Animation

Question

Hey I am new to react konva. I am creating a project in which i want a rectangle to revolves around an object. Can anybody advise me on how to achieve this. Any help is much appreciated

    <div>
      <Stage width={500} height={500}>
        <Layer>
            <Rect ///<=this rect is the center object
              width={50}
              height={100}
              x={20}
              y={20}
              strokeWidth={2}
              stroke="red"
              fill="blue"
              opacity={1}         
            />
        
            <Rect ///<=this rect should revolve around it
              width={50}
              height={100}
              x={50}
              y={50}
              strokeWidth={2}
              stroke="black"
              fill="black"
              opacity={1}         
            />
        </Layer>
      </Stage>
      <Button onClick={handleRotate}>Start Rotation</Button>
    </div>

Answer 1

you can use the .rotate property of node

const ref=useRef(null)

useEffect(() => {
  
    var rect= ref.current;
    var anim = new Konva.Animation((frame) => {
      rect?.rotate((frame.timeDiff *90) / 1000);
    }, rect?.getLayer());
    anim?.start();
    
  }, [input]);

<Rect
ref={ref}
/>