diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx
index e59ae81feef7e..09190da1d10fb 100644
--- a/packages/interactivity/src/directives.tsx
+++ b/packages/interactivity/src/directives.tsx
@@ -51,7 +51,7 @@ const isObject = ( item: any ): boolean =>
 const mergeDeepSignals = (
 	target: DeepSignalObject< any >,
 	source: DeepSignalObject< any >,
-	overwrite: boolean = false
+	overwrite?: boolean
 ) => {
 	for ( const k in source ) {
 		if ( isObject( peek( target, k ) ) && isObject( peek( source, k ) ) ) {
@@ -123,7 +123,7 @@ const getGlobalEventDirective =
 			} );
 	};
 
-export default (): void => {
+export default () => {
 	// data-wp-context
 	directive(
 		'context',
@@ -131,25 +131,31 @@ export default (): void => {
 			directives: { context },
 			props: { children },
 			context: inheritedContext,
-		}: DirectiveArgs ): Element => {
+		} ) => {
 			const { Provider } = inheritedContext;
 			const inheritedValue = useContext( inheritedContext );
 			const currentValue = useRef( deepSignal( {} ) );
-			const passedValues = context.map( ( { value } ) => value );
+			const defaultEntry = context.find(
+				( { suffix } ) => suffix === 'default'
+			);
 
 			currentValue.current = useMemo( () => {
-				const newValue = context
-					.map( ( c ) => deepSignal( { [ c.namespace ]: c.value } ) )
-					.reduceRight( mergeDeepSignals );
-
+				if ( ! defaultEntry ) return null;
+				const { namespace, value } = defaultEntry;
+				const newValue = deepSignal( { [ namespace ]: value } );
 				mergeDeepSignals( newValue, inheritedValue );
 				mergeDeepSignals( currentValue.current, newValue, true );
 				return currentValue.current;
-			}, [ inheritedValue, ...passedValues ] );
+			}, [ inheritedValue, defaultEntry ] );
 
-			return (
-				<Provider value={ currentValue.current }>{ children }</Provider>
-			);
+			if ( currentValue.current ) {
+				return (
+					<Provider value={ currentValue.current }>
+						{ children }
+					</Provider>
+				);
+			}
+			return undefined;
 		},
 		{ priority: 5 }
 	);
@@ -220,9 +226,9 @@ export default (): void => {
 						 * need deps because it only needs to do it the first time.
 						 */
 						if ( ! result ) {
-							element.ref.current.classList.remove( name );
+							element.ref!.current.classList.remove( name );
 						} else {
-							element.ref.current.classList.add( name );
+							element.ref!.current.classList.add( name );
 						}
 					} );
 				} );
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
index 18471cd0c16b7..4ae070056b2cc 100644
--- a/packages/interactivity/src/hooks.tsx
+++ b/packages/interactivity/src/hooks.tsx
@@ -20,7 +20,6 @@ import type {
 	DirectiveCallback,
 	DirectiveOptions,
 	DirectivesProps,
-	GetEvaluate,
 	GetPriorityLevels,
 	Scope,
 } from './types';
@@ -205,7 +204,7 @@ const resolve = ( path, namespace ) => {
 };
 
 // Generate the evaluate function.
-export const getEvaluate: GetEvaluate =
+export const getEvaluate: any =
 	( { scope } ) =>
 	( entry, ...args ) => {
 		let { value: path, namespace } = entry;
diff --git a/packages/interactivity/src/types.ts b/packages/interactivity/src/types.ts
index 39040e01a949e..a379c62c33de8 100644
--- a/packages/interactivity/src/types.ts
+++ b/packages/interactivity/src/types.ts
@@ -41,7 +41,7 @@ export interface DirectiveArgs {
 	/**
 	 * Virtual node representing the element.
 	 */
-	element?: Element;
+	element?: any;
 	/**
 	 * The inherited context.
 	 */
@@ -54,7 +54,7 @@ export interface DirectiveArgs {
 }
 
 export interface DirectiveCallback {
-	( args: DirectiveArgs ): Element | void;
+	( args: DirectiveArgs ): VNode | void;
 }
 
 export interface DirectiveOptions {