I’m using the code from the repository https://www.npmjs.com/package/react-multi-crops to enable selection of various parts of an image. Initially, I adapted the code from https://www.npmjs.com/package/react-multi-crops to suit my needs.

While everything functions correctly, my requirement includes implementing a zoom feature within the image container. After implementing the zoom functionality, I noticed that while the current selections remain undisturbed, the position of the resize cursor, movement, and creation of new selection boxes are affected.

The issue arises particularly when the zoom value is increased e.g. chage it to 150 or 200. At this level, the creation of new selection blocks doesn’t align accurately with the mouse, and the resizing and movement of existing boxes fail to work properly.

Here’s the link to the sandbox with the code: https://codesandbox.io/p/sandbox/image-crop-multiple-m3flxr

I tried a lot to fix this issue but did not get success. Thanks if you can look into this and help me to solve this issue.