Is there any way to use react-moveable in Nextjs? - next.js

Question

I'm currently using react-moveable and react-selecto packages to build a moveable component. But it seems to be a problem with these two main packages and Nextjs.
I'm using React v18.1.0 and Next v12.1.6
import React, { useRef, useState } from "react";
import Moveable from "react-moveable";
import Selecto from "react-selecto";
export default function MoveableProvider() {
const [targets, setTargets] = useState([]);
const [frameMap] = useState(() => new Map());
const selectoRef = useRef(null);
const moveableRef = useRef(null);
return (
<div className="container">
<Moveable
ref={moveableRef}
draggable={true}
target={targets}
onClickGroup={(e) => {
selectoRef.current.clickTarget(e.inputEvent, e.inputTarget);
}}
onDrag={(e) => {
const target = e.target;
const frame = frameMap.get(target);
frame.translate = e.beforeTranslate;
target.style.transform = `translate(${frame.translate[0]}px, ${frame.translate[1]}px)`;
}}
onDragStart={(e) => {
const target = e.target;
if (!frameMap.has(target)) {
frameMap.set(target, {
translate: [0, 0],
});
}
const frame = frameMap.get(target);
e.set(frame.translate);
}}
onDragGroupStart={(e) => {
e.events.forEach((ev) => {
const target = ev.target;
if (!frameMap.has(target)) {
frameMap.set(target, {
translate: [0, 0],
});
}
const frame = frameMap.get(target);
ev.set(frame.translate);
});
}}
onDragGroup={(e) => {
e.events.forEach((ev) => {
const target = ev.target;
const frame = frameMap.get(target);
frame.translate = ev.beforeTranslate;
target.style.transform = `translate(${frame.translate[0]}px, ${frame.translate[1]}px)`;
});
}}
/>
<Selecto
ref={selectoRef}
dragContainer={".elements"}
selectableTargets={[".selecto-area .cube"]}
hitRate={0}
selectByClick={true}
selectFromInside={false}
toggleContinueSelect={["shift"]}
ratio={0}
onDragStart={(e) => {
const moveable = moveableRef.current;
const target = e.inputEvent.target;
k;
if (
moveable.isMoveableElement(target) ||
targets.some((t) => t === target || t.contains(target))
) {
e.stop();
}
}}
onSelectEnd={(e) => {
const moveable = moveableRef.current;
setTargets(e.selected);
if (e.isDragStart) {
e.inputEvent.preventDefault();
setTimeout(() => {
moveable.dragStart(e.inputEvent);
});
}
}}
></Selecto>
<div className="elements selecto-area" style={{ display: "flex" }}>
<div
className="cube target"
style={{
width: 250,
height: 200,
background: "green",
}}
></div>
<div
className="cube target"
style={{
width: 250,
height: 200,
background: "yellow",
}}
></div>
<div
className="cube target"
style={{
width: 250,
height: 200,
background: "aqua",
}}
></div>
<div
className="cube target"
style={{
width: 250,
height: 200,
background: "red",
}}
></div>
</div>
<div className="empty elements"></div>
</div>
);
}
In this case onDragGroup doesn't work for no reason in Nextjs but single drag (onDrag) works fine.
Is there any way that SSR would be causing the problem?