diff --git a/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx b/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx
index 68bf81048d2..dc78c52d7d8 100644
--- a/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx
+++ b/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as ReactDOM from 'react-dom';
 import { css } from '@patternfly/react-styles';
 import {
@@ -288,6 +288,25 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
   };
 
   const dragOverlay = <DragOverlay>{activeId && getDragOverlay()}</DragOverlay>;
+
+  // Find the React root element dynamically instead of hardcoding 'root'
+  // Memoized to avoid looking up the root element on every render
+  const rootElement = useMemo(() => {
+    if (!canUseDOM) {
+      return null;
+    }
+    // Try common root element IDs
+    const commonRootIds = ['root', 'app', 'main', '__next'];
+    for (const id of commonRootIds) {
+      const element = document.getElementById(id);
+      if (element) {
+        return element;
+      }
+    }
+    // Fallback to document.body if no common root is found
+    return document.body;
+  }, []); // Empty deps - root element doesn't change after mount
+
   return (
     <DndContext
       sensors={sensors}
@@ -299,7 +318,7 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
       {...props}
     >
       {children}
-      {canUseDOM ? ReactDOM.createPortal(dragOverlay, document.getElementById('root')) : dragOverlay}
+      {canUseDOM ? ReactDOM.createPortal(dragOverlay, rootElement) : dragOverlay}
     </DndContext>
   );
 };