diff --git a/packages/core/components/Puck/components/Preview/index.tsx b/packages/core/components/Puck/components/Preview/index.tsx
index 66e7060770..ab3ecb3eef 100644
--- a/packages/core/components/Puck/components/Preview/index.tsx
+++ b/packages/core/components/Puck/components/Preview/index.tsx
@@ -1,21 +1,31 @@
 import { DropZone } from "../../../DropZone";
 import { rootDroppableId } from "../../../../lib/root-droppable-id";
-import { useCallback, useRef } from "react";
+import { ReactNode, useCallback, useRef } from "react";
 import { useAppContext } from "../../context";
 import AutoFrame from "@measured/auto-frame-component";
 import styles from "./styles.module.css";
 import { getClassNameFactory } from "../../../../lib";
+import { DefaultRootProps } from "../../../../types/Config";
 
 const getClassName = getClassNameFactory("PuckPreview", styles);
 
+type PageProps = DefaultRootProps & { children: ReactNode };
+
 export const Preview = ({ id = "puck-preview" }: { id?: string }) => {
   const { config, dispatch, state, setStatus, iframe } = useAppContext();
 
-  const Page = useCallback(
+  const Page = useCallback<React.FC<PageProps>>(
     (pageProps) =>
-      config.root?.render
-        ? config.root?.render({ ...pageProps, editMode: true })
-        : pageProps.children,
+      config.root?.render ? (
+        config.root?.render({
+          id: "puck-root",
+          ...pageProps,
+          editMode: true,
+          puck: { renderDropZone: DropZone },
+        })
+      ) : (
+        <>{pageProps.children}</>
+      ),
     [config.root]
   );