diff --git a/packages/components/src/drop-zone/index.js b/packages/components/src/drop-zone/index.js
index de2318d4d7c84..5180c6efdd704 100644
--- a/packages/components/src/drop-zone/index.js
+++ b/packages/components/src/drop-zone/index.js
@@ -22,6 +22,7 @@ export function useDropZone( {
 	onDrop,
 	isDisabled,
 	withPosition,
+	__unstableIsRelative = false,
 } ) {
 	const { addDropZone, removeDropZone } = useContext( Context );
 	const [ state, setState ] = useState( {
@@ -39,6 +40,7 @@ export function useDropZone( {
 				onHTMLDrop,
 				setState,
 				withPosition,
+				isRelative: __unstableIsRelative,
 			};
 			addDropZone( dropZone );
 			return () => {
@@ -76,6 +78,7 @@ function DropZoneComponent( {
 			onFilesDrop,
 			onHTMLDrop,
 			onDrop,
+			__unstableIsRelative: true,
 		}
 	);
 
diff --git a/packages/components/src/drop-zone/provider.js b/packages/components/src/drop-zone/provider.js
index cd71dc000e4ff..43d9d859fd484 100644
--- a/packages/components/src/drop-zone/provider.js
+++ b/packages/components/src/drop-zone/provider.js
@@ -150,18 +150,18 @@ class DropZoneProvider extends Component {
 		);
 
 		// Find the leaf dropzone not containing another dropzone
-		const hoveredDropZone = find(
-			hoveredDropZones,
-			( zone ) =>
-				! some(
-					hoveredDropZones,
-					( subZone ) =>
-						subZone !== zone &&
-						zone.element.current.parentElement.contains(
-							subZone.element.current
-						)
-				)
-		);
+		const hoveredDropZone = find( hoveredDropZones, ( zone ) => {
+			const container = zone.isRelative
+				? zone.element.current.parentElement
+				: zone.element.current;
+
+			return ! some(
+				hoveredDropZones,
+				( subZone ) =>
+					subZone !== zone &&
+					container.contains( subZone.element.current )
+			);
+		} );
 
 		const hoveredDropZoneIndex = this.dropZones.indexOf( hoveredDropZone );