Zoom image given x and y

I have an image which as a "ruler" (made of basic divs positioned absolute on top of the image) that are use to measure the ends of the image. Now the idea is that if you long press one of the ruler ends (the dots at the end of the line which are draggable), the image in the background would zoom in that point, and follow the dot if the user moves it. I am able to detect the long press but I cannot get the image to zoom and follow the dot once detected. The code below is where I have done the detection and now I should apply the styling to move the image. I thought of using the transition property but couldn't get it to zoom on the dot. Any help is appreciated...

Here's a codesandbox with how the ruler works: Link

Meaningful code:

const x = get('x', varToUse); //This just gives the x coordinate of the ruler end
const y = get('y', varToUse); //This just gives the y coordinate of the ruler end

const image = ruler.current.parentElement.parentElement.childNodes[1].childNodes[1];

if (zoom) {
  image.style.transform = `translate(${x * 2}px, ${y * 2}px) scale(2.0)`;
} else {
  image.style.transform = `scale(1.0)`;
}

This is what the ruler looks like just to get an understanding:

from Zoom image given x and y