Add side resize for rectangle polygon layer in Mapbox GL

I'm building a tool for editing rectangular polygon on a Mapbox map in web. I rectangle has controls on the middle of each rectangle side that allow side resizing. This resizing should allow move only one certain side and make rectangle smaller or bigger.

Now I have below decision for handling move event:

onPointerMove = (event: MapMouseEvent) => {
    if (!isNumber(this.knobIndex)) return;
    if (!this.raster.coordinates?.length) return;

    const pointB = [event.lngLat.lng, event.lngLat.lat];

    const indexA = this.knobIndex;
    const indexB = (this.knobIndex + 1) % 4;

    const pointA = this.raster.coordinates[indexA];
    const pointC = this.raster.coordinates[indexB];

    const deltaX = pointB[0] - (pointA[0] + pointC[0]) / 2;
    const deltaY = pointB[1] - (pointA[1] + pointC[1]) / 2;

    const newCoordinates = [...this.raster.coordinates];
    newCoordinates[indexA] = [pointA[0] + deltaX, pointA[1] + deltaY];
    newCoordinates[indexB] = [pointC[0] + deltaX, pointC[1] + deltaY];

    this.onUpdate(newCoordinates);
  };

It works, but while resizing right side, for example, it moves not only in x axis, but also y axis. See photos. [enter image description here](https://i.sstatic.net/pBlwuLCf.png)

But the rectangle should always maintain 90° angles (no distortion).

How can I correctly calculate the new positions of the two adjacent corners when moving a side while keeping the rectangle's shape?