diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
index 560943aa5d9634..f7d5ab36566e30 100644
--- a/packages/interface/src/components/interface-skeleton/index.js
+++ b/packages/interface/src/components/interface-skeleton/index.js
@@ -7,7 +7,10 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { forwardRef, useEffect } from '@wordpress/element';
-import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
+import {
+	__unstableUseNavigateRegions as useNavigateRegions,
+	__unstableMotion as motion,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
 
@@ -101,14 +104,13 @@ function InterfaceSkeleton(
 			<div className="interface-interface-skeleton__editor">
 				{ !! header && isDistractionFree && (
 					<NavigableRegion
+						as={ motion.div }
 						className="interface-interface-skeleton__header"
 						aria-label={ mergedLabels.header }
-						motionProps={ {
-							initial: isDistractionFree ? 'hidden' : 'hover',
-							whileHover: 'hover',
-							variants: headerVariants,
-							transition: { type: 'tween', delay: 0.8 },
-						} }
+						initial={ isDistractionFree ? 'hidden' : 'hover' }
+						whileHover="hover"
+						variants={ headerVariants }
+						transition={ { type: 'tween', delay: 0.8 } }
 					>
 						{ header }
 					</NavigableRegion>
diff --git a/packages/interface/src/components/navigable-region/index.js b/packages/interface/src/components/navigable-region/index.js
index 3b86b856b1d3f6..31037ffd333546 100644
--- a/packages/interface/src/components/navigable-region/index.js
+++ b/packages/interface/src/components/navigable-region/index.js
@@ -3,26 +3,20 @@
  */
 import classnames from 'classnames';
 
-/**
- * WordPress dependencies
- */
-import { __unstableMotion as motion } from '@wordpress/components';
-
 export default function NavigableRegion( {
 	children,
 	className,
 	ariaLabel,
-	motionProps = {},
+	as: Tag = 'div',
+	...props
 } ) {
-	const Tag = Object.keys( motionProps ).length ? motion.div : 'div';
-
 	return (
 		<Tag
 			className={ classnames( 'interface-navigable-region', className ) }
 			aria-label={ ariaLabel }
 			role="region"
 			tabIndex="-1"
-			{ ...motionProps }
+			{ ...props }
 		>
 			<div className="interface-navigable-region__stacker">
 				{ children }