Updating the coordinates of the child element after scaling

Help me figure out how to update coordinates for child elements in the form of imgElement images in div canvas-cameras. In the center there is a div with a background picture. In the div, I add as many small images as I want using the ShowImage() function. Using mouse events, I can move both the entire div (with all the pictures inside with reference to a specific location) and the pictures themselves. There are no problems with this. The problem appears when scaling. When I scale the whole div and start moving the picture in this div, it abruptly moves away from the mouse to the left or right (depending on the degree of scaling), but if I release the picture and try to move it again, it does not jump away. As I understand it, this is due to the fact that when zooming, the coordinates of the images inside the div are also “scaled” and when the image is moved for the first time, it “adapts” to the new coordinates. How to fix it? The code is a bit “dirty”, I’m experimenting with it.

var scale = 1,
    images = document.querySelectorAll('.draggable-image'),
    activeImage = null,
    minScale = 0.7,
    maxScale = 2,
    panning = false;

function setTransform(element, pointX, pointY) {
    element.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
}
function setTransform2(element, pointX, pointY) {

    element.style.transform = "translate(" + pointX + "px, " + pointY + "px)";
}

function handleMouseDown(e) {
    e.preventDefault();
    var target = e.target;

    if (target.classList.contains('draggable-image')) {
        activeImage = target;


        activeImage.startX = (e.clientX - window.scrollX - parseInt(activeImage.dataset.pointX || 0)) / scale;
        activeImage.startY = (e.clientY - window.scrollY - parseInt(activeImage.dataset.pointY || 0)) / scale;

        panning = true;
    }
}

function handleMouseUp() {
    panning = false;
    activeImage = null;
}

function handleMouseMove(e) {
    if (!panning || !activeImage) {
        return;
    }

    var newPointX = (e.clientX - window.scrollX - activeImage.startX * scale);
    var newPointY = (e.clientY - window.scrollY - activeImage.startY * scale);

    activeImage.dataset.pointX = newPointX;
    activeImage.dataset.pointY = newPointY;

    if (activeImage.id == 'canvas-cameras') {
        setTransform(activeImage, newPointX, newPointY);
    } else {
        setTransform2(activeImage, newPointX / scale, newPointY/ scale);
    }
}

function handleWheel(e) {
    var delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY);

    if (delta > 0 && scale < maxScale) {
        scale *= 1.2;
    } else if (delta < 0 && scale > minScale) {
        scale /= 1.2;
    }

    var canvasDiv = document.getElementById('canvas-cameras');
    var xs = (e.clientX - parseInt(canvasDiv.dataset.pointX)) / scale,
        ys = (e.clientY - parseInt(canvasDiv.dataset.pointY)) / scale;
    canvasDiv.dataset.pointX = e.clientX - xs * scale;
    canvasDiv.dataset.pointY = e.clientY - ys * scale;
    setTransform(canvasDiv, parseInt(canvasDiv.dataset.pointX), parseInt(canvasDiv.dataset.pointY));
}

document.addEventListener('mousedown', handleMouseDown, { passive: false });
document.addEventListener('mouseup', handleMouseUp);
document.addEventListener('mousemove', handleMouseMove, { passive: false });
document.addEventListener('wheel', handleWheel, { passive: false });

var imageCounter = 1;

document.getElementById('addCamera').addEventListener('click', function () {
    showImage();
});

function showImage() {
    var imgElement = document.createElement('img');
    var canvasDiv = document.getElementById('canvas-cameras');

    imgElement.src = '/images/cameras_img/camera.png';
    imgElement.alt = 'Картинка ' + imageCounter;
    imgElement.className = 'draggable-image';

    imgElement.style.position = 'absolute';
    imgElement.style.top = '20px';
    imgElement.style.left = '20px';
    imgElement.style.height = '20px';
    imgElement.style.width = '20px';

    var uniqueId = 'image' + imageCounter;
    imgElement.id = uniqueId;

    canvasDiv.appendChild(imgElement);

    images = document.querySelectorAll('.draggable-image');
    imgElement.dataset.pointX = 0;
    imgElement.dataset.pointY = 0;
    imageCounter++;
}

I have already tried to update the coordinates as best I could after scaling all the pictures, but nothing comes out…