Fixup

src/components/interactive-builder/draggable-question.component.tsx

@@ -4,9 +4,7 @@ import { CSS } from "@dnd-kit/utilities";
 import { useTranslation } from "react-i18next";
 import { Button } from "@carbon/react";
 import { Edit, Replicate, TrashCan, Draggable } from "@carbon/react/icons";
-
-import { Question } from "../../types";
-
+import type { Question } from "../../types";
 import styles from "./draggable-question.scss";
 
 type DraggableQuestionProps = {
@@ -42,13 +40,12 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
       id: draggableId,
       disabled: allQuestions.length <= 1,
     });
-
   const style = {
     transform: CSS.Translate.toString(transform),
     cursor: isDragging ? "grabbing" : "grab",
   };
-
   const dragStyles = isDragging ? styles.isDragged : styles.normal;
+
   return (
     <div className={dragStyles} style={style}>
       <div

src/components/interactive-builder/draggable-question.scss

@@ -24,6 +24,7 @@
 .normal:hover {
   background-color: $ui-03;
 }
+
 .isDragged {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   background-color: rgba(255, 255, 255, 0.552);

src/components/interactive-builder/droppable-container.component.tsx

@@ -1,9 +1,14 @@
 import React from "react";
 import { useDroppable } from "@dnd-kit/core";
 
-export function Droppable(props) {
+type DroppableProps = {
+  id: string;
+  children: React.ReactNode;
+};
+
+export function Droppable({ id, children }: DroppableProps) {
   const { isOver, setNodeRef } = useDroppable({
-    id: props.id,
+    id: id,
   });
 
   const style = {
@@ -12,7 +17,7 @@ export function Droppable(props) {
 
   return (
     <div ref={setNodeRef} style={style}>
-      {props.children}
+      {children}
     </div>
   );
 }