diff --git a/__mocks__/react-beautiful-dnd.tsx b/__mocks__/react-beautiful-dnd.tsx
new file mode 100644
index 0000000000..6404bfd450
--- /dev/null
+++ b/__mocks__/react-beautiful-dnd.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+
+import type {
+  DragDropContextProps,
+  DraggableProps,
+  DroppableProps,
+} from "react-beautiful-dnd";
+
+export const DragDropContext = ({ children }: DragDropContextProps) => <>{ children }</>;
+export const Draggable = ({ children }: DraggableProps) => <>{ children }</>;
+export const Droppable = ({ children }: DroppableProps) => <>{ children }</>;
diff --git a/src/renderer/components/hotbar/hotbar-menu.tsx b/src/renderer/components/hotbar/hotbar-menu.tsx
index 9e3b9e5488..05e11bf659 100644
--- a/src/renderer/components/hotbar/hotbar-menu.tsx
+++ b/src/renderer/components/hotbar/hotbar-menu.tsx
@@ -184,7 +184,9 @@ class NonInjectedHotbarMenu extends React.Component<Dependencies & HotbarMenuPro
     return (
       <div className={cssNames("HotbarMenu flex column", { draggingOver: this.draggingOver }, className)}>
         <div className="HotbarItems flex column gaps">
-          <DragDropContext onDragStart={() => this.onDragStart()} onDragEnd={(result) => this.onDragEnd(result)}>
+          <DragDropContext
+            onDragStart={() => this.onDragStart()}
+            onDragEnd={(result) => this.onDragEnd(result)}>
             {this.renderGrid()}
           </DragDropContext>
         </div>