Y Direction of Element Changing Automatically. How to set X, Y position for the moveable target

[Parth909]

Environments

Framework name: React v16 Framework version: 0.56.0 Moveable Component version:

Description

The Y Co-ordinate of the element is changing automatically when a new element is added.

In the below video 👇 you can see that when the first textbox is added the translate(x, y) is 70px & 70px for the Moveable Control Box and for the target div with class 'selecto-selectable'.

Problem is when the second textbox is added the translate(x, y) is 70px & 70px for the target div with class 'selecto-selectable' but 70px & 160px for Moveable Control Box

https://github.com/daybrush/moveable/assets/59220026/f6713e5e-d717-4568-8087-b7499e2f39de

Solutions Tried

Tried changing the css when onChangeTargets event is fired but only the position of the control box changes & something seems like broken.

onChangeTargets={(e) => {
                        // Because we are using the same Moveable Component when a new layer is added the "Moveable Control Box" shift down & after a few layers goes outside the div.
                        console.log("onChangeTargets", e);

                        if (
                          e.moveable &&
                          Array.isArray(e.targets) &&
                          e.targets.length > 0
                        ) {
                          // target's style is correct translate(70px, 70px)
                          let target = e.targets[0];
                          e.moveable.controlBox.style.transform =
                            target.style.transform;
                          e.moveable.controlBox.style.webkitTransform =
                            target.style.transform;
                        }
                      }}

You can see in the below video 👇 the way it is broken the box is somewhere else & the text is somewhere but there styles is 70px & 70px for the Moveable Control Box and for the target div with class 'selecto-selectable'

https://github.com/daybrush/moveable/assets/59220026/6cd58ba3-4f5e-418f-aad6-149a6a480bf9

Here is the link to the full code where I'm using InfiniteViewer, react-moveable, react-selecto. https://pastebin.com/XqBUXV31