diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx
index 4e4b323e4e85fa..884a91008a8a96 100644
--- a/packages/interactivity/src/directives.tsx
+++ b/packages/interactivity/src/directives.tsx
@@ -4,7 +4,7 @@
 /**
  * External dependencies
  */
-import { h as createElement, type RefObject } from 'preact';
+import { h as createElement, type VNode, type RefObject } from 'preact';
 import { useContext, useMemo, useRef } from 'preact/hooks';
 
 /**
@@ -573,11 +573,13 @@ export default () => {
 				? kebabToCamelCase( entry.suffix )
 				: 'item';
 
-			if ( typeof list?.map !== 'function' ) {
-				return [];
+			if ( ! list || ! ( Symbol.iterator in list ) ) {
+				return;
 			}
 
-			return list.map( ( item ) => {
+			const result: VNode< any >[] = [];
+
+			for ( const item of list ) {
 				const itemContext = proxifyContext(
 					proxifyState( namespace, {} ),
 					inheritedValue.client[ namespace ]
@@ -602,12 +604,15 @@ export default () => {
 					? getEvaluate( { scope } )( eachKey[ 0 ] )
 					: item;
 
-				return createElement(
-					Provider,
-					{ value: mergedContext, key },
-					element.props.content
+				result.push(
+					createElement(
+						Provider,
+						{ value: mergedContext, key },
+						element.props.content
+					)
 				);
-			} );
+			}
+			return result;
 		},
 		{ priority: 20 }
 	);
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
index e9b9f48ba3518e..7899e3eafd2281 100644
--- a/packages/interactivity/src/hooks.tsx
+++ b/packages/interactivity/src/hooks.tsx
@@ -77,7 +77,7 @@ interface DirectiveArgs {
 }
 
 export interface DirectiveCallback {
-	( args: DirectiveArgs ): VNode< any > | null | void;
+	( args: DirectiveArgs ): VNode< any > | VNode< any >[] | null | void;
 }
 
 interface DirectiveOptions {