So in my web application using react-konva, I have a tool that lets me draw polygons with vertices as circles, I can drag the vertices and update the state of the vertices, but I would like to be able to drag the entire polygon and get the new position of circles in the group to update my state.

I tried this in my handleDragEnd function:

const handlePolygonDragEnd = (
        event: KonvaEventObject<DragEvent>,
        polygonName: string
    ) => {
        if (isDrawing) return;

        const group = event.target;

        const newGroupPosition = {x:group.x(), y:group.y()};
       
        if (group === null) return;
        if (group instanceof Konva.Group) {
            // const children = group.getChildren().slice(1);

            const newPolygons = polygons.map((polygon) => {
                if (polygon.name === polygonName) {
                    const newPoints = polygon.points.map((point) => {
                        return [point[0] + newGroupPosition.x, point[1] + newGroupPosition.y];
                    });
                    return {
                        ...polygon,
                        points: [...newPoints],
                    };
                }
                return polygon;
            });
            setPolygons(newPolygons);

            // group.setAbsolutePosition({ x: 0, y: 0 });
        }
    };

But for some reason it just makes my polygons jump rather than staying in the position that I want it to be.

Thank you