Add functional changes for the replacement

src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx

@@ -1,7 +1,8 @@
 import React from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
 import styled from "styled-components";
 import shortid from "shortid";
-import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import colors from "@theme/colors";
 import AddIcon from "@components/AddIcon";
 import { SignupFormQuestion } from "@models/Signup";
@@ -34,12 +35,9 @@ const AddQuestionButton = styled.button`
 interface SignupQuestionsWidgetProps {
   value: string;
   onChange: (value: string) => void;
-  onFocus: () => void;
-  required: boolean;
-  disabled: boolean;
 }
 
-const SignupQuestionsWidget: React.FC<SignupQuestionsWidgetProps> = ({ value, onFocus, onChange }) => {
+const SignupQuestionsWidget: React.FC<SignupQuestionsWidgetProps> = ({ value, onChange }) => {
   const onValueChange = (questions: SignupFormQuestion[]) => {
     const newValue = JSON.stringify(questions);
     onChange(newValue);
@@ -62,35 +60,16 @@ const SignupQuestionsWidget: React.FC<SignupQuestionsWidgetProps> = ({ value, on
     onValueChange(newQuestions);
   };
 
-  const handleDragEnd = (questions: SignupFormQuestion[]) => (result) => {
-    const srcIndex = result.source.index;
-    const dstIndex = result.destination.index;
-    const srcCopy = { ...questions[srcIndex] };
-    questions.splice(srcIndex, 1);
-    questions.splice(dstIndex, 0, srcCopy);
-
-    onValueChange(questions);
-  };
   const questions: SignupFormQuestion[] = JSON.parse(value);
 
   return (
     <Widget>
-      <DragDropContext
-        onDragEnd={handleDragEnd(questions)}
-        onDragStart={onFocus}
-      >
-        <Droppable droppableId="questions">
-          {(provided) => (
-            <QuestionList
-              {...provided.droppableProps}
-              innerRef={provided.innerRef}
-              questions={questions}
-              onChange={onValueChange}
-              placeholder={provided.placeholder}
-            />
-          )}
-        </Droppable>
-      </DragDropContext>
+      <DndProvider backend={HTML5Backend}>
+        <QuestionList
+          questions={questions}
+          onChange={onValueChange}
+        />
+      </DndProvider>
       <AddQuestionButton type="button" onClick={handleNewRowClick(questions)} data-e2e="admin-signup-new-question">
         <AddIcon />
         New Question