fix: drag&drop bug

src/index.tsx

@@ -42,7 +42,6 @@ const routeslink: {
 const root = createRoot(document.getElementById("root")!);
 
 root.render(
-  <React.StrictMode>
   <DndProvider backend={HTML5Backend}>
     <ThemeProvider theme={lightTheme}>
       <BrowserRouter>
@@ -62,5 +61,4 @@ root.render(
       </BrowserRouter>
     </ThemeProvider>
   </DndProvider>
-  </React.StrictMode>
 );

src/pages/Questions/DraggableList/StrictModeDroppable.tsx

@@ -1,23 +0,0 @@
-import { useState, useEffect } from "react";
-import { Droppable } from "react-beautiful-dnd";
-
-import type { DroppableProps } from "react-beautiful-dnd";
-
-export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
-  const [enabled, setEnabled] = useState(false);
-
-  useEffect(() => {
-    const animation = requestAnimationFrame(() => setEnabled(true));
-
-    return () => {
-      setEnabled(false);
-      cancelAnimationFrame(animation);
-    };
-  }, []);
-
-  if (!enabled) {
-    return null;
-  }
-
-  return <Droppable {...props}>{children}</Droppable>;
-};

src/pages/Questions/DraggableList/index.tsx

@@ -1,8 +1,7 @@
 import { useState } from "react";
 import { Box } from "@mui/material";
-import { DragDropContext } from "react-beautiful-dnd";
+import { DragDropContext, Droppable } from "react-beautiful-dnd";
 
-import { StrictModeDroppable } from "./StrictModeDroppable";
 import { DraggableListItem } from "./DraggableListItem";
 
 import { questionStore, updateQuestionsListDragAndDrop } from "@root/questions";
@@ -37,7 +36,7 @@ export const DraggableList = () => {
       }}
       onDragEnd={onDragEnd}
     >
-      <StrictModeDroppable droppableId="droppable-list">
+      <Droppable droppableId="droppable-list">
         {(provided) => (
           <Box
             ref={provided.innerRef}
@@ -58,7 +57,7 @@ export const DraggableList = () => {
             {provided.placeholder}
           </Box>
         )}
-      </StrictModeDroppable>
+      </Droppable>
     </DragDropContext>
   );
 };

src/pages/Questions/answerOptions/AnswerDraggableList/StrictModeDroppable.tsx

@@ -1,23 +0,0 @@
-import { useState, useEffect } from "react";
-import { Droppable } from "react-beautiful-dnd";
-
-import type { DroppableProps } from "react-beautiful-dnd";
-
-export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
-  const [enabled, setEnabled] = useState(false);
-
-  useEffect(() => {
-    const animation = requestAnimationFrame(() => setEnabled(true));
-
-    return () => {
-      setEnabled(false);
-      cancelAnimationFrame(animation);
-    };
-  }, []);
-
-  if (!enabled) {
-    return null;
-  }
-
-  return <Droppable {...props}>{children}</Droppable>;
-};

src/pages/Questions/answerOptions/AnswerDraggableList/index.tsx

@@ -1,7 +1,6 @@
 import { Box } from "@mui/material";
-import { DragDropContext } from "react-beautiful-dnd";
+import { DragDropContext, Droppable } from "react-beautiful-dnd";
 
-import { StrictModeDroppable } from "./StrictModeDroppable";
 import { AnswerItem } from "./AnswerItem";
 
 import { updateVariants } from "@root/questions";
@@ -30,7 +29,7 @@ export const AnswerDraggableList = ({
 
   return (
     <DragDropContext onDragEnd={onDragEnd}>
-      <StrictModeDroppable droppableId="droppable-answer-list">
+      <Droppable droppableId="droppable-answer-list">
         {(provided) => (
           <Box ref={provided.innerRef} {...provided.droppableProps}>
             {variants.map((variant, index) => (
@@ -45,7 +44,7 @@ export const AnswerDraggableList = ({
             {provided.placeholder}
           </Box>
         )}
-      </StrictModeDroppable>
+      </Droppable>
     </DragDropContext>
   );
 };