diff --git a/src/components/FrameMetadata.test.tsx b/src/components/FrameMetadata.test.tsx
index 9d61a0b94d..01e095755b 100644
--- a/src/components/FrameMetadata.test.tsx
+++ b/src/components/FrameMetadata.test.tsx
@@ -78,4 +78,17 @@ describe('FrameMetadata', () => {
     ).toBe('10');
     expect(meta.container.querySelectorAll('meta').length).toBe(3);
   });
+
+  it('renders with wrapperComponent', () => {
+    const meta = render(
+      <FrameMetadata
+        image="https://example.com/image.png"
+        wrapperComponent={({ children }) => <div id="wrapper">{children}</div>}
+      />,
+    );
+
+    expect(meta.container.querySelector('#wrapper')).not.toBeNull();
+    expect(meta.container.querySelector('meta[name="fc:frame:image"]')).not.toBeNull();
+    expect(meta.container.querySelectorAll('meta').length).toBe(2);
+  });
 });
diff --git a/src/components/FrameMetadata.tsx b/src/components/FrameMetadata.tsx
index 8a19b0ea57..a6e2e2fff2 100644
--- a/src/components/FrameMetadata.tsx
+++ b/src/components/FrameMetadata.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment } from 'react';
 import type { FrameMetadataType } from '../core/types';
 
 /**
@@ -42,7 +42,7 @@ export function FrameMetadata({
   input,
   post_url,
   refresh_period,
-  wrapperComponent: WrapperComponent = React.Fragment,
+  wrapperComponent: WrapperComponent = Fragment,
 }: FrameMetadataType) {
   return (
     <WrapperComponent>