diff --git a/packages/eui/src-docs/src/views/drag_and_drop/drag_and_drop_example.js b/packages/eui/src-docs/src/views/drag_and_drop/drag_and_drop_example.js
index a07dbfdcd0f..471f589e10f 100644
--- a/packages/eui/src-docs/src/views/drag_and_drop/drag_and_drop_example.js
+++ b/packages/eui/src-docs/src/views/drag_and_drop/drag_and_drop_example.js
@@ -375,13 +375,13 @@ export const DragAndDropExample = {
           </p>
           <EuiCallOut color="warning" title="Style inheritance">
             <p>
-              If the styling of the <strong>EuiDraggable</strong> content is
-              relative to an outer scope component, the styling won't be applied
-              whiled dragging it when using <EuiCode>usePortal</EuiCode>. This
-              is because due to the changed position in the DOM which changes
-              previous hierarchical relations to other ancestor elements. To
-              prevent this from happening, we recommend to apply styling from
-              within the <strong>EuiDraggable</strong> scope.
+              If the styling of the your draggable content is scoped to a parent
+              component, the styling won't be applied while dragging it when
+              using <EuiCode>usePortal</EuiCode>. This is due to the portalled
+              position in the DOM, which changes previous hierarchical relations
+              to other ancestor elements. To prevent this from happening, we
+              recommend applying styling from within the{' '}
+              <strong>EuiDraggable</strong> scope without any parent selectors.
             </p>
           </EuiCallOut>
         </>
diff --git a/packages/eui/src-docs/src/views/drag_and_drop/drag_and_drop_portal.tsx b/packages/eui/src-docs/src/views/drag_and_drop/drag_and_drop_portal.tsx
index 50dbf1ebae2..eae3d20fc0d 100644
--- a/packages/eui/src-docs/src/views/drag_and_drop/drag_and_drop_portal.tsx
+++ b/packages/eui/src-docs/src/views/drag_and_drop/drag_and_drop_portal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { FunctionComponent, ReactElement, useState } from 'react';
 import {
   EuiButton,
   EuiDragDropContext,
@@ -17,7 +17,7 @@ import {
   euiDragDropReorder,
 } from '../../../../src/components';
 import { htmlIdGenerator } from '../../../../src/services';
-import { OnDragEndResponder } from '@hello-pangea/dnd';
+import { DroppableProps, OnDragEndResponder } from '@hello-pangea/dnd';
 
 const makeId = htmlIdGenerator();
 
@@ -29,6 +29,17 @@ const makeList = (number: number, start = 1) =>
     };
   });
 
+const DragContainer: FunctionComponent<{
+  children: ReactElement | ReactElement[] | DroppableProps['children'];
+  onDragEnd: OnDragEndResponder;
+}> = ({ children, onDragEnd }) => (
+  <EuiDragDropContext onDragEnd={onDragEnd}>
+    <EuiDroppable droppableId="DROPPABLE_AREA" spacing="m">
+      {children}
+    </EuiDroppable>
+  </EuiDragDropContext>
+);
+
 export default () => {
   const [isFlyoutOpen, setFlyoutOpen] = useState(false);
   const [isModalOpen, setModalOpen] = useState(false);
@@ -63,26 +74,24 @@ export default () => {
             </EuiTitle>
           </EuiFlyoutHeader>
           <EuiFlyoutBody>
-            <EuiDragDropContext onDragEnd={onDragEnd}>
-              <EuiDroppable droppableId="DROPPABLE_AREA" spacing="m" withPanel>
-                {list.map(({ content, id }, idx) => (
-                  <EuiDraggable
-                    spacing="m"
-                    key={id}
-                    index={idx}
-                    draggableId={id}
-                    usePortal
-                  >
-                    {(provided, state) => (
-                      <EuiPanel hasShadow={state.isDragging}>
-                        {content}
-                        {state.isDragging && ' ✨'}
-                      </EuiPanel>
-                    )}
-                  </EuiDraggable>
-                ))}
-              </EuiDroppable>
-            </EuiDragDropContext>
+            <DragContainer onDragEnd={onDragEnd}>
+              {list.map(({ content, id }, idx) => (
+                <EuiDraggable
+                  spacing="m"
+                  key={id}
+                  index={idx}
+                  draggableId={id}
+                  usePortal
+                >
+                  {(provided, state) => (
+                    <EuiPanel hasShadow={state.isDragging}>
+                      {content}
+                      {state.isDragging && ' ✨'}
+                    </EuiPanel>
+                  )}
+                </EuiDraggable>
+              ))}
+            </DragContainer>
           </EuiFlyoutBody>
         </EuiFlyout>
       )}
@@ -97,26 +106,24 @@ export default () => {
             </EuiTitle>
           </EuiModalHeader>
           <EuiModalBody>
-            <EuiDragDropContext onDragEnd={onDragEnd}>
-              <EuiDroppable droppableId="DROPPABLE_AREA" spacing="m" withPanel>
-                {list.map(({ content, id }, idx) => (
-                  <EuiDraggable
-                    spacing="m"
-                    key={id}
-                    index={idx}
-                    draggableId={id}
-                    usePortal
-                  >
-                    {(provided, state) => (
-                      <EuiPanel hasShadow={state.isDragging}>
-                        {content}
-                        {state.isDragging && ' ✨'}
-                      </EuiPanel>
-                    )}
-                  </EuiDraggable>
-                ))}
-              </EuiDroppable>
-            </EuiDragDropContext>
+            <DragContainer onDragEnd={onDragEnd}>
+              {list.map(({ content, id }, idx) => (
+                <EuiDraggable
+                  spacing="m"
+                  key={id}
+                  index={idx}
+                  draggableId={id}
+                  usePortal
+                >
+                  {(provided, state) => (
+                    <EuiPanel hasShadow={state.isDragging}>
+                      {content}
+                      {state.isDragging && ' ✨'}
+                    </EuiPanel>
+                  )}
+                </EuiDraggable>
+              ))}
+            </DragContainer>
           </EuiModalBody>
         </EuiModal>
       )}
@@ -134,7 +141,7 @@ export default () => {
         panelPaddingSize="none"
         panelProps={{ css: { inlineSize: 200 } }}
       >
-        <EuiDragDropContext
+        <DragContainer
           onDragEnd={({ source, destination }) => {
             if (source && destination) {
               const items = euiDragDropReorder(
@@ -146,22 +153,20 @@ export default () => {
             }
           }}
         >
-          <EuiDroppable droppableId="droppableInPopover" spacing="m">
-            {list.map(({ content, id }, idx) => (
-              <EuiDraggable
-                spacing="m"
-                key={id}
-                index={idx}
-                draggableId={id}
-                usePortal
-              >
-                {(provided, state) => (
-                  <EuiPanel hasShadow={state.isDragging}>{content}</EuiPanel>
-                )}
-              </EuiDraggable>
-            ))}
-          </EuiDroppable>
-        </EuiDragDropContext>
+          {list.map(({ content, id }, idx) => (
+            <EuiDraggable
+              spacing="m"
+              key={id}
+              index={idx}
+              draggableId={id}
+              usePortal
+            >
+              {(provided, state) => (
+                <EuiPanel hasShadow={state.isDragging}>{content}</EuiPanel>
+              )}
+            </EuiDraggable>
+          ))}
+        </DragContainer>
       </EuiPopover>
     </>
   );
diff --git a/packages/website/docs/02_components/display/drag_and_drop/overview.mdx b/packages/website/docs/02_components/display/drag_and_drop/overview.mdx
index ed2d353c883..33597d24723 100644
--- a/packages/website/docs/02_components/display/drag_and_drop/overview.mdx
+++ b/packages/website/docs/02_components/display/drag_and_drop/overview.mdx
@@ -132,19 +132,19 @@ the visual changes with drop-to-remove interactions.
 This positioning logic does not work as expected when used inside of containers that have their own
 [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context).
 
-To ensure dragging works as expected inside e.g. **EuiFlyout** or **EuiModal use the prop `usePortal` on **EuiDraggable** components. 
+To ensure dragging works as expected inside e.g. **EuiFlyout** or **EuiModal** use the prop `usePortal` on **EuiDraggable** components. 
 This will render the currently dragged element inside a portal appended to the document body (or wherever
 **EuiPortal** is configured to `insert` to by default).
 
 :::warning 
-If the styling of the **EuiDraggable** content is relative to an outer scope component, the styling won't be applied
-whiled dragging it when using **usePortal**. This is because due to the changed position in the DOM which changes
-previous hierarchical relations to other ancestor elements. To prevent this from happening, we recommend to apply 
-styling from within the **EuiDraggable** scope.
+If the styling of the your draggable content is scoped to a parent component, the styling won't be applied
+while dragging it when using `usePortal`. This is due to the portalled position in the DOM, which changes
+previous hierarchical relations to other ancestor elements. To prevent this from happening, we recommend 
+applying styling from within the **EuiDraggable** scope without any parent selectors.
 :::
 
 ```tsx interactive
-import React, { useState } from 'react';
+import React, { FunctionComponent, ReactElement, useState } from 'react';
 import {
   EuiButton,
   EuiCode,
@@ -163,6 +163,7 @@ import {
   euiDragDropReorder,
   htmlIdGenerator
 } from '@elastic/eui';
+import { DroppableProps, OnDragEndResponder } from '@hello-pangea/dnd';
 
 const makeId = htmlIdGenerator();
 
@@ -174,6 +175,17 @@ const makeList = (number, start = 1) =>
     };
   });
 
+const DragContainer: FunctionComponent<{
+  children: ReactElement | ReactElement[] | DroppableProps['children'];
+  onDragEnd: OnDragEndResponder;
+}> = ({ children, onDragEnd }) => (
+  <EuiDragDropContext onDragEnd={onDragEnd}>
+    <EuiDroppable droppableId="DROPPABLE_AREA" spacing="m">
+      {children}
+    </EuiDroppable>
+  </EuiDragDropContext>
+);
+
 export default () => {
   const [isFlyoutOpen, setFlyoutOpen] = useState(false);
   const [isModalOpen, setModalOpen] = useState(false);
@@ -197,36 +209,35 @@ export default () => {
       <EuiButton onClick={() => setModalOpen(!isModalOpen)}>
         Toggle modal
       </EuiButton>
+
       {isFlyoutOpen && (
         <EuiFlyout onClose={() => setFlyoutOpen(false)}>
           <EuiFlyoutHeader>
             <EuiTitle size="s">
               <h2>
-                Portalled <EuiCode>EuiDraggable</EuiCode> items
+                Portalled <strong>EuiDraggable</strong> items
               </h2>
             </EuiTitle>
           </EuiFlyoutHeader>
           <EuiFlyoutBody>
-            <EuiDragDropContext onDragEnd={onDragEnd}>
-              <EuiDroppable droppableId="DROPPABLE_AREA" spacing="m" withPanel>
-                {list.map(({ content, id }, idx) => (
-                  <EuiDraggable
-                    spacing="m"
-                    key={id}
-                    index={idx}
-                    draggableId={id}
-                    usePortal
-                  >
-                    {(provided, state) => (
-                      <EuiPanel hasShadow={state.isDragging}>
-                        {content}
-                        {state.isDragging && ' ✨'}
-                      </EuiPanel>
-                    )}
-                  </EuiDraggable>
-                ))}
-              </EuiDroppable>
-            </EuiDragDropContext>
+            <DragContainer onDragEnd={onDragEnd}>
+              {list.map(({ content, id }, idx) => (
+                <EuiDraggable
+                  spacing="m"
+                  key={id}
+                  index={idx}
+                  draggableId={id}
+                  usePortal
+                >
+                  {(provided, state) => (
+                    <EuiPanel hasShadow={state.isDragging}>
+                      {content}
+                      {state.isDragging && ' ✨'}
+                    </EuiPanel>
+                  )}
+                </EuiDraggable>
+              ))}
+            </DragContainer>
           </EuiFlyoutBody>
         </EuiFlyout>
       )}
@@ -236,31 +247,29 @@ export default () => {
           <EuiModalHeader>
             <EuiTitle size="s">
               <h2>
-                Portalled <EuiCode>EuiDraggable</EuiCode> items
+                Portalled <strong>EuiDraggable</strong> items
               </h2>
             </EuiTitle>
           </EuiModalHeader>
           <EuiModalBody>
-            <EuiDragDropContext onDragEnd={onDragEnd}>
-              <EuiDroppable droppableId="DROPPABLE_AREA" spacing="m" withPanel>
-                {list.map(({ content, id }, idx) => (
-                  <EuiDraggable
-                    spacing="m"
-                    key={id}
-                    index={idx}
-                    draggableId={id}
-                    usePortal
-                  >
-                    {(provided, state) => (
-                      <EuiPanel hasShadow={state.isDragging}>
-                        {content}
-                        {state.isDragging && ' ✨'}
-                      </EuiPanel>
-                    )}
-                  </EuiDraggable>
-                ))}
-              </EuiDroppable>
-            </EuiDragDropContext>
+            <DragContainer onDragEnd={onDragEnd}>
+              {list.map(({ content, id }, idx) => (
+                <EuiDraggable
+                  spacing="m"
+                  key={id}
+                  index={idx}
+                  draggableId={id}
+                  usePortal
+                >
+                  {(provided, state) => (
+                    <EuiPanel hasShadow={state.isDragging}>
+                      {content}
+                      {state.isDragging && ' ✨'}
+                    </EuiPanel>
+                  )}
+                </EuiDraggable>
+              ))}
+            </DragContainer>
           </EuiModalBody>
         </EuiModal>
       )}
@@ -278,7 +287,7 @@ export default () => {
         panelPaddingSize="none"
         panelProps={{ css: { inlineSize: 200 } }}
       >
-        <EuiDragDropContext
+        <DragContainer
           onDragEnd={({ source, destination }) => {
             if (source && destination) {
               const items = euiDragDropReorder(
@@ -290,22 +299,20 @@ export default () => {
             }
           }}
         >
-          <EuiDroppable droppableId="droppableInPopover" spacing="m">
-            {list.map(({ content, id }, idx) => (
-              <EuiDraggable
-                spacing="m"
-                key={id}
-                index={idx}
-                draggableId={id}
-                usePortal
-              >
-                {(provided, state) => (
-                  <EuiPanel hasShadow={state.isDragging}>{content}</EuiPanel>
-                )}
-              </EuiDraggable>
-            ))}
-          </EuiDroppable>
-        </EuiDragDropContext>
+          {list.map(({ content, id }, idx) => (
+            <EuiDraggable
+              spacing="m"
+              key={id}
+              index={idx}
+              draggableId={id}
+              usePortal
+            >
+              {(provided, state) => (
+                <EuiPanel hasShadow={state.isDragging}>{content}</EuiPanel>
+              )}
+            </EuiDraggable>
+          ))}
+        </DragContainer>
       </EuiPopover>
     </>
   );