How can you toggle the snap functionality dynamically when a certain div is entered via Interact JS. I would like to enable snapping as soon as a div is entered and disabled as soon as someone leaves the div.

My current approach is in this sandbox but the CSS is broken (not sure how to fix that it is taken from here https://interactjs.io/docs/faq/#clone-target-draggable)

const snap = interact.modifiers.snap({
  targets: [interact.snappers.grid({ x: 30, y: 30 })],
  range: Infinity,
  relativePoints: [{ x: 0, y: 0 }]
});
snap.disable();
// on enter div -> snap.enable();

As you can maybe see in the picture, the divs are not really aligned when I enable/disable snap dynamically as their enter point seems different.

My goal is to correctly align them like here