How To Crop uploaded image with react-konva

Question

I am using react-konva and I want to crop my selected image when edit button clicked. Can anyone please guide me how I can achieve this ?

this is the Rect I am using to crop the portion of the image. Here in this code onShapeChange function saves the crop value of the image in
canvas editor.

{(isCropping && 
                <>
                    {React.createElement(`Rect`, {
                        ref: cropRef,
                        key: selectedShape.id,
                        id: selectedShape.id,
                        ...selectedShape.attributes,
                        draggable: false,
                        onTransformEnd: (e) => {
                            const node = cropRef.current;
                            const scaleX = node.scaleX();
                            const scaleY = node.scaleY();
                            node.scaleX(1);
                            node.scaleY(1);
                            const newShape = {
                                ...selectedShape,
                                attributes:
                                {
                                    ...selectedShape.attributes,
                                    crop: {
                     
                    x: node.x() - selectedShape.attributes.x,
                                        y: node.y() - selectedShape.attributes.y,
                                        // width: this.state.rect.attrs.width,
                                        // height: this.state.rect.attrs.height

                                        // x: node.x(),
                                        // y: node.y(),
                                        width: Math.max(5, node.width() * scaleX),
                                        height: Math.max(node.height() * scaleY),
                                    }
                                }
                            }
                            console.log('newShape in cropper', newShape, 'SelectedShape', selectedShape);
                            onShapeChange({
                                id: selectedShape.id,
                                index: selectedReportItem.index,
                                reportIndex: selectedReportItem.reportIndex,
                                newItem: newShape,
                            })
                            setIsCropping(false);
                        }
                    }, null)}
                    <Transformer
                        ref={croptrRef}
                        rotateEnabled={false}
                        flipEnabled={false}
                        boundBoxFunc={(oldBox, newBox) => {
                            // limit resize
                            if (newBox.width < 5 || newBox.height < 5) {
                                return oldBox;
                            }
                            return newBox;
                        }}
                    />
                </>
            }