I am trying to resize the rectangle inside the SVG by using mouse events. Currently, I am working on the right bottom edge, for that, I created another circle shape and I am applying events on that shape to resize the rectangle. I don't know why when I start resizing it first it gets small and then starts resizing.

const min = 54;
            let initialWidth = 0, initialHeight = 0, mouseX = 0, mouseY = 0;
rightBottomCorner.addEventListener('mousedown', function(evt: any) {
              getMousePositions(evt);
              getElementDimensions();
              evt.stopPropagation();
              window.addEventListener('mousemove', scale);
              window.addEventListener('mouseup', removeScale);
            });

            function getMousePositions(evt: any) {
              mouseX = evt.pageX;
              mouseY = evt.pageY;
            }

            function getElementDimensions() {
              selectedRect = rect;
              initialWidth = selectedRect.clientWidth;
              initialHeight = selectedRect.clientHeight;
            }

            function scale(evt: any) {
              selectedRect = rect;
              const width = initialWidth + (evt.pageX - mouseX);
              const height = initialHeight + (evt.pageY - mouseY);
              if (width > min) {
                selectedRect.setAttributeNS(null, 'width', width as unknown as string);
              }
              if (height > min) {
                selectedRect.setAttributeNS(null, 'height', height as unknown as string);
              }
            }

            function removeScale() {
              window.removeEventListener('mousemove', scale);
            }