fix draggable with custom hook

src/containers/questions-list/QuestionsList.tsx

@@ -11,6 +11,7 @@ import {
 import Box from '@mui/material/Box'
 
 import Question from '~/components/question/Question'
+import useDroppable from '~/hooks/use-droppable'
 
 import { styles } from '~/containers/questions-list/QuestionsList.styles'
 import { Question as QuestionInterface } from '~/types'
@@ -21,6 +22,8 @@ interface QuestionsListProps {
 }
 
 const QuestionsList: FC<QuestionsListProps> = ({ items, setItems }) => {
+  const { enabled } = useDroppable()
+
   const reorder = (
     list: QuestionInterface[],
     startIndex: number,
@@ -64,13 +67,16 @@ const QuestionsList: FC<QuestionsListProps> = ({ items, setItems }) => {
 
   return (
     <DragDropContext onDragEnd={onDragEnd}>
-      <Droppable droppableId='draggable'>
-        {(provided: DroppableProvided) => (
-          <Box {...provided.droppableProps} ref={provided.innerRef}>
-            {questionsList}
-          </Box>
-        )}
-      </Droppable>
+      {enabled && (
+        <Droppable droppableId='draggable'>
+          {(provided: DroppableProvided) => (
+            <Box {...provided.droppableProps} ref={provided.innerRef}>
+              {questionsList}
+              {provided.placeholder}
+            </Box>
+          )}
+        </Droppable>
+      )}
     </DragDropContext>
   )
 }

src/hooks/use-droppable.tsx

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react'
+
+const useDroppable = () => {
+  const [enabled, setEnabled] = useState(false)
+
+  useEffect(() => {
+    const animation = requestAnimationFrame(() => setEnabled(true))
+
+    return () => {
+      cancelAnimationFrame(animation)
+      setEnabled(false)
+    }
+  }, [])
+
+  return { enabled }
+}
+
+export default useDroppable