let scale = 1;
    let translateX = 0;
    let translateY = 0;
    let element = document.querySelector('img');

    let zoom = ( e ) => {

        e.preventDefault();

        let formerScale = scale;
        scale -= (e.deltaY / 5000);
        let elemRect = element.getBoundingClientRect();
        let mX = e.clientX - elemRect.x;
        let mY = e.clientY - elemRect.y;

        let newMX = mX - translateX ;
        let newMY = mY - translateY;
        
        let x = mX - (newMX * (scale / formerScale));
        let y = mY - (newMY * (scale / formerScale));
        translateX = x;
        translateY = y;

        element.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;

    }
    element.addEventListener('mousewheel', wheelZoom);

I am having trouble getting this zoom based on mouse position to work. I got this image with a 3:2 aspect ratio as the elem and the zoom isn't behaving the way its supposed to. It is zooming, but it is traveling away from the area where the mouse is rather than adjusting to it. Would really appreciate some input on the implementation of the zoom here. Thank you!!