diff --git a/packages/react/components/Dialog/Component.tsx b/packages/react/components/Dialog/Component.tsx
index 2695ce3..1b135c1 100644
--- a/packages/react/components/Dialog/Component.tsx
+++ b/packages/react/components/Dialog/Component.tsx
@@ -95,30 +95,32 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
 
     return (
       <ServerSideDocumentFallback>
-        {ReactDOM.createPortal(
-          <div
-            {...otherPropsExtracted}
-            id={ids.dialog}
-            ref={ref}
-            className={dialogOverlayVariant(variantProps)}
-            onClick={(e) => {
-              if (closeOnClick) {
-                setContext((p) => ({ ...p, opened: false }));
-              }
-              onClick?.(e);
-            }}
-          >
+        {() =>
+          ReactDOM.createPortal(
             <div
-              className={
-                "w-screen max-w-full min-h-screen flex flex-col justify-center items-center"
-              }
+              {...otherPropsExtracted}
+              id={ids.dialog}
+              ref={ref}
+              className={dialogOverlayVariant(variantProps)}
+              onClick={(e) => {
+                if (closeOnClick) {
+                  setContext((p) => ({ ...p, opened: false }));
+                }
+                onClick?.(e);
+              }}
             >
-              {/* Layer for overflow positioning */}
-              {children}
-            </div>
-          </div>,
-          document.body,
-        )}
+              <div
+                className={
+                  "w-screen max-w-full min-h-screen flex flex-col justify-center items-center"
+                }
+              >
+                {/* Layer for overflow positioning */}
+                {children}
+              </div>
+            </div>,
+            document.body,
+          )
+        }
       </ServerSideDocumentFallback>
     );
   },
diff --git a/packages/react/components/Drawer.tsx b/packages/react/components/Drawer.tsx
index 42d84f3..f2e3925 100644
--- a/packages/react/components/Drawer.tsx
+++ b/packages/react/components/Drawer.tsx
@@ -127,23 +127,25 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
 
     return (
       <ServerSideDocumentFallback>
-        {createPortal(
-          <Comp
-            {...restPropsExtracted}
-            className={drawerOverlayVariant({
-              ...variantProps,
-              opened: state.isDragging ? true : state.opened,
-            })}
-            onClick={onOutsideClick}
-            style={{
-              backdropFilter,
-              WebkitBackdropFilter: backdropFilter,
-              transitionDuration: state.isDragging ? "0s" : undefined,
-            }}
-            ref={ref}
-          />,
-          document.body,
-        )}
+        {() =>
+          createPortal(
+            <Comp
+              {...restPropsExtracted}
+              className={drawerOverlayVariant({
+                ...variantProps,
+                opened: state.isDragging ? true : state.opened,
+              })}
+              onClick={onOutsideClick}
+              style={{
+                backdropFilter,
+                WebkitBackdropFilter: backdropFilter,
+                transitionDuration: state.isDragging ? "0s" : undefined,
+              }}
+              ref={ref}
+            />,
+            document.body,
+          )
+        }
       </ServerSideDocumentFallback>
     );
   },