Konva Live - handling onDragMove while updating state

Question

I'm trying to sync the position of a Konva Line with the coordinates of a polygon that defines a Line for each segment of the poly. I want to enable drag resize along those line segments.

onDragMove fires, but resetting the position (so that future deltas are calculated from the now-updated position) seems to be working irregularly.

If I use a <Circle /> or any other x/y based shape, things work fine.

CodeSandbox Reproduction

class App extends Component {
  state = {
    isDragging: false,
    x: 50,
    y: 50,
    points: [
      { x: 100, y: 100 },
      { x: 200, y: 100 },
      { x: 200, y: 200 },
      { x: 100, y: 200 },
    ],
  };

  render() {
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Line
            closed={true}
            points={this.state.points.flatMap((point) => [point.x, point.y])}
            stroke="#000"
            strokeWidth={3}
          />
          {this.state.points.map((point, index) => {
            const nextPoint =
              this.state.points[(index + 1) % this.state.points.length];
            return (
              <Line
                key={`segment-${index}`}
                points={[point.x, point.y, nextPoint.x, nextPoint.y]}
                stroke={"blue"}
                strokeWidth={6}
                draggable
                offset={{ x: 0, y: 0 }}
                onMouseEnter={(e) => {
                  e.target.setAttrs({
                    stroke: "red",
                  });
                }}
                onMouseLeave={(e) => {
                  e.target.setAttrs({
                    stroke: "blue",
                  });
                }}
                onDragMove={(e) => {
                  const delta = { x: e.target.x(), y: e.target.y() };
                  const points = [...this.state.points];
                  this.setState({
                    points: points.map((p, i) =>
                      i === index
                        ? {
                          x: point.x + delta.x,
                          y: point.y + delta.y,
                        }
                        : i === (index + 1) % points.length
                          ? {
                            x: nextPoint.x + delta.x,
                            y: nextPoint.y + delta.y,
                          }
                          : p
                    ),
                  });
                  e.target.x(0);
                  e.target.y(0);
                }}
              />
            );
          })}
        </Layer>
      </Stage>
    );
  }
}