diff --git a/packages/components/src/card/card-media/component.js b/packages/components/src/card/card-media/component.js
index 3c562604eb964b..c07f78ce52b3ae 100644
--- a/packages/components/src/card/card-media/component.js
+++ b/packages/components/src/card/card-media/component.js
@@ -1,9 +1,20 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../../ui/utils';
+import { contextConnect } from '../../ui/context';
+import { View } from '../../view';
 import { useCardMedia } from './hook';
 
+/**
+ * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props
+ * @param {import('react').Ref<any>}                                                                           forwardedRef
+ */
+function CardMedia( props, forwardedRef ) {
+	const cardMediaProps = useCardMedia( props );
+
+	return <View { ...cardMediaProps } ref={ forwardedRef } />;
+}
+
 /**
  * `CardMedia` provides a container for media elements within a `Card`.
  *
@@ -21,10 +32,6 @@ import { useCardMedia } from './hook';
  * );
  * ```
  */
-const CardMedia = createComponent( {
-	as: 'div',
-	useHook: useCardMedia,
-	name: 'CardMedia',
-} );
+const ConnectedCardMedia = contextConnect( CardMedia, 'CardMedia' );
 
-export default CardMedia;
+export default ConnectedCardMedia;