diff --git a/packages/react/src/media/dash-video/index.tsx b/packages/react/src/media/dash-video/index.tsx
index fef05f19..dc48f427 100644
--- a/packages/react/src/media/dash-video/index.tsx
+++ b/packages/react/src/media/dash-video/index.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import type { InferDelegateProps } from '@videojs/core';
 import { DashMedia, DashMediaDelegate } from '@videojs/core/dom/media/dash';
 import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
@@ -10,7 +12,7 @@ import { useMediaInstance } from '../../utils/use-media-instance';
 export type DashVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
   InferDelegateProps<typeof DashMediaDelegate>;
 
-export const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(({ children, ...props }, ref) => {
+export const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(function DashVideo({ children, ...props }, ref) {
   const mediaApi = useMediaInstance(DashMedia);
 
   const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
@@ -22,4 +24,6 @@ export const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(({ childre
   );
 });
 
-export default DashVideo;
+export namespace DashVideo {
+  export type Props = DashVideoProps;
+}
diff --git a/packages/react/src/media/hls-video/index.tsx b/packages/react/src/media/hls-video/index.tsx
index a4d0c06f..07509bad 100644
--- a/packages/react/src/media/hls-video/index.tsx
+++ b/packages/react/src/media/hls-video/index.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import type { InferDelegateProps } from '@videojs/core';
 import { HlsMedia, HlsMediaDelegate } from '@videojs/core/dom/media/hls';
 import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
@@ -10,7 +12,7 @@ import { useMediaInstance } from '../../utils/use-media-instance';
 export type HlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
   InferDelegateProps<typeof HlsMediaDelegate>;
 
-export const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(({ children, ...props }, ref) => {
+export const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(function HlsVideo({ children, ...props }, ref) {
   const mediaApi = useMediaInstance(HlsMedia);
 
   const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
@@ -22,4 +24,6 @@ export const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(({ children,
   );
 });
 
-export default HlsVideo;
+export namespace HlsVideo {
+  export type Props = HlsVideoProps;
+}
diff --git a/packages/react/src/media/mux-video/index.tsx b/packages/react/src/media/mux-video/index.tsx
index 2bc57116..561a02eb 100644
--- a/packages/react/src/media/mux-video/index.tsx
+++ b/packages/react/src/media/mux-video/index.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import type { InferDelegateProps } from '@videojs/core';
 import { MuxMediaDelegate, MuxVideo as MuxVideoApi } from '@videojs/core/dom/media/mux';
 import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
@@ -10,7 +12,7 @@ import { useMediaInstance } from '../../utils/use-media-instance';
 export type MuxVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
   InferDelegateProps<typeof MuxMediaDelegate>;
 
-export const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(({ children, ...props }, ref) => {
+export const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(function MuxVideo({ children, ...props }, ref) {
   const mediaApi = useMediaInstance(MuxVideoApi);
 
   const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
@@ -22,4 +24,6 @@ export const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(({ children,
   );
 });
 
-export default MuxVideo;
+export namespace MuxVideo {
+  export type Props = MuxVideoProps;
+}
diff --git a/packages/react/src/media/native-hls-video/index.tsx b/packages/react/src/media/native-hls-video/index.tsx
index 2dad3af8..24c331b2 100644
--- a/packages/react/src/media/native-hls-video/index.tsx
+++ b/packages/react/src/media/native-hls-video/index.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import type { InferDelegateProps } from '@videojs/core';
 import { NativeHlsMedia, NativeHlsMediaDelegate } from '@videojs/core/dom/media/native-hls';
 import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
@@ -10,7 +12,10 @@ import { useMediaInstance } from '../../utils/use-media-instance';
 export type NativeHlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
   InferDelegateProps<typeof NativeHlsMediaDelegate>;
 
-export const NativeHlsVideo = forwardRef<HTMLVideoElement, NativeHlsVideoProps>(({ children, ...props }, ref) => {
+export const NativeHlsVideo = forwardRef<HTMLVideoElement, NativeHlsVideoProps>(function NativeHlsVideo(
+  { children, ...props },
+  ref
+) {
   const mediaApi = useMediaInstance(NativeHlsMedia);
 
   const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
@@ -22,4 +27,6 @@ export const NativeHlsVideo = forwardRef<HTMLVideoElement, NativeHlsVideoProps>(
   );
 });
 
-export default NativeHlsVideo;
+export namespace NativeHlsVideo {
+  export type Props = NativeHlsVideoProps;
+}
diff --git a/packages/react/src/media/simple-hls-video/index.tsx b/packages/react/src/media/simple-hls-video/index.tsx
index 23a79585..fffd3447 100644
--- a/packages/react/src/media/simple-hls-video/index.tsx
+++ b/packages/react/src/media/simple-hls-video/index.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { SimpleHlsMedia } from '@videojs/core/dom/media/simple-hls';
 import { SpfMedia } from '@videojs/spf/dom';
 import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
@@ -9,7 +11,10 @@ import { useMediaInstance } from '../../utils/use-media-instance';
 
 export type SimpleHlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;
 
-export const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(({ children, ...props }, ref) => {
+export const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(function SimpleHlsVideo(
+  { children, ...props },
+  ref
+) {
   const mediaApi = useMediaInstance(SimpleHlsMedia);
 
   const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
@@ -21,4 +26,6 @@ export const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(
   );
 });
 
-export default SimpleHlsVideo;
+export namespace SimpleHlsVideo {
+  export type Props = SimpleHlsVideoProps;
+}