Snappable method doesn't work after zooming

[Immayou]

Environments

Framework name: React.js
Framework version: 18.3.1
Moveable Component version: 0.56.0

Description

The library is really awesome :)

But I have a problem.
I use this library with react-zoom-pan-pinch.
So parent container and moveable components may be zoomed.
That's why I had to write special logics of onDrag and onDragStart, because after zooming the cursor wasn't in the correct position with moveable objects.

  const handleDragStart = ({ target, clientX, clientY }: OnDragStart) => {
      const initialTransform =
        target.style.transform.match(/translate\(([^)]+)\)/);
      const initialTranslate = initialTransform
        ? initialTransform[1]
            .split(",")
            .map((value) => parseFloat(value.trim()))
        : [0, 0];
      target.setAttribute("data-initial-x", initialTranslate[0].toString());
      target.setAttribute("data-initial-y", initialTranslate[1].toString());
      target.setAttribute("data-start-client-x", clientX.toString());
      target.setAttribute("data-start-client-y", clientY.toString());
  };
  
  const handleDrag = ({ target, clientX, clientY }: OnDrag) => {
    const initialX = parseFloat(target.getAttribute("data-initial-x") || "0");
    const initialY = parseFloat(target.getAttribute("data-initial-y") || "0");
    const startClientX = parseFloat(
      target.getAttribute("data-start-client-x") || "0"
    );
    const startClientY = parseFloat(
      target.getAttribute("data-start-client-y") || "0"
    );

    const deltaX = (clientX - startClientX) / currentScale;
    const deltaY = (clientY - startClientY) / currentScale;

    target.style.transform = `translate(${initialX + deltaX}px, ${initialY + deltaY}px)`;
  };

Drag event works nice, but snappable method doesn't work correct.
Do you have any advice for me, please?)
Thank you!

[HZZformGD]

If there are some demos, your problem can be better pinpointed with the help of your written description.