fix: replace react-beautiful-dnd with @hello-pangea/dnd

package.json

@@ -6,6 +6,7 @@
     "src/config.ts"
   ],
   "dependencies": {
+    "@hello-pangea/dnd": "^16.6.0",
     "@hookform/resolvers": "^3.9.0",
     "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@mapbox/mapbox-gl-geocoder": "^5.0.2",
@@ -33,7 +34,6 @@
     "query-string": "^7.1.3",
     "react": "18.3.1",
     "react-avatar-editor": "^13.0.2",
-    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "18.3.1",
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.13",

src/common/components/StrictModeDroppable.js

@@ -16,7 +16,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { Droppable } from 'react-beautiful-dnd';
+import { Droppable } from '@hello-pangea/dnd';
 
 // Work around for react-beautiful-dnd issue. The issues is that the
 // Droppable component is not compatible with React.StrictMode.

src/sharedData/visualization/components/VisualizationConfigForm/AnnotateStep.js

@@ -22,8 +22,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import { DragDropContext, Draggable } from '@hello-pangea/dnd';
 import _ from 'lodash/fp';
-import { DragDropContext, Draggable } from 'react-beautiful-dnd';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import * as yup from 'yup';

src/storyMap/components/StoryMapForm/ChaptersSideBar.js

@@ -16,7 +16,7 @@
  */
 
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { DragDropContext, Draggable } from 'react-beautiful-dnd';
+import { DragDropContext, Draggable } from '@hello-pangea/dnd';
 import { useTranslation } from 'react-i18next';
 import AddIcon from '@mui/icons-material/Add';
 import MoreVertIcon from '@mui/icons-material/MoreVert';