diff --git a/packages/react/lib/ssrFallback.tsx b/packages/react/lib/ssrFallback.tsx
index abaff35..f252c9f 100644
--- a/packages/react/lib/ssrFallback.tsx
+++ b/packages/react/lib/ssrFallback.tsx
@@ -4,7 +4,9 @@ import { type ReactNode, useEffect, useState } from "react";
  * This component allows components to use `document` as like they're always in the client side.
  * Return null if there is no `document` (which represents it's server side) or initial render(to avoid hydration error).
  */
-function ServerSideDocumentFallback({ children }: { children: ReactNode }) {
+function ServerSideDocumentFallback({
+  children,
+}: { children: () => ReactNode }) {
   const [initialRender, setInitialRender] = useState<boolean>(true);
 
   useEffect(() => {
@@ -14,7 +16,7 @@ function ServerSideDocumentFallback({ children }: { children: ReactNode }) {
   if (typeof document === "undefined" /* server side */ || initialRender)
     return null;
 
-  return children;
+  return children();
 }
 
 export { ServerSideDocumentFallback };
diff --git a/packages/react/lib/withSSD.tsx b/packages/react/lib/withSSD.tsx
index ae1e293..13a402a 100644
--- a/packages/react/lib/withSSD.tsx
+++ b/packages/react/lib/withSSD.tsx
@@ -7,7 +7,7 @@ function withServerSideDocument<P extends {}>(
   const SSDocumentFallbackWrapper = (props: P) => {
     return (
       <ServerSideDocumentFallback>
-        <Component {...props} />
+        {() => <Component {...props} />}
       </ServerSideDocumentFallback>
     );
   };