diff --git a/__mocks__/react-beautiful-dnd.tsx b/__mocks__/react-beautiful-dnd.tsx
index 79eec81f6e..f884a6ebbe 100644
--- a/__mocks__/react-beautiful-dnd.tsx
+++ b/__mocks__/react-beautiful-dnd.tsx
@@ -11,5 +11,49 @@ import type {
 } from "react-beautiful-dnd";
 
 export const DragDropContext = ({ children }: DragDropContextProps) => <>{ children }</>;
-export const Draggable = ({ children }: DraggableProps) => <>{ children({} as any, {} as any, {} as any) }</>;
-export const Droppable = ({ children }: DroppableProps) => <>{ children({} as any, {} as any) }</>;
+export const Draggable = ({ children }: DraggableProps) => (
+  <>
+    {
+      children(
+        {
+          draggableProps: {
+            "data-rbd-draggable-context-id": "some-mock-rbd-draggable-context-id",
+            "data-rbd-draggable-id": "some-mock-rbd-draggable-id",
+          },
+          innerRef: () => {},
+        },
+        {
+          isDragging: false,
+          isDropAnimating: false,
+        },
+        {
+          draggableId: "some-mock-draggable-id",
+          mode: "FLUID",
+          source: {
+            droppableId: "some-mock-droppable-id",
+            index: 0,
+          },
+        },
+      )
+    }
+  </>
+);
+export const Droppable = ({ children }: DroppableProps) => (
+  <>
+    {
+      children(
+        {
+          droppableProps: {
+            "data-rbd-droppable-context-id": "some-mock-rbd-droppable-context-id",
+            "data-rbd-droppable-id": "some-mock-rbd-droppable-id",
+          },
+          innerRef: () => {},
+        },
+        {
+          isDraggingOver: false,
+          isUsingPlaceholder: false,
+        },
+      )
+    }
+  </>
+);