diff --git a/demo-app/resources/js/app.jsx b/demo-app/resources/js/app.jsx
index 136d0b3..34aa262 100644
--- a/demo-app/resources/js/app.jsx
+++ b/demo-app/resources/js/app.jsx
@@ -15,9 +15,7 @@ createInertiaApp({
         const root = createRoot(el);
 
         root.render(
-            <App {...props}>
-                {renderApp(props)}
-            </App>
+            renderApp(App, props)
         );
     },
     progress: {
diff --git a/react/src/ModalRoot.jsx b/react/src/ModalRoot.jsx
index ea3fdec..880ed7d 100644
--- a/react/src/ModalRoot.jsx
+++ b/react/src/ModalRoot.jsx
@@ -400,7 +400,7 @@ export const useModalStack = () => {
 
 export const modalPropNames = ['closeButton', 'closeExplicitly', 'maxWidth', 'paddingClasses', 'panelClasses', 'position', 'slideover']
 
-export const renderApp = (pageProps) => {
+export const renderApp = (App, pageProps) => {
     if (pageProps.initialPage) {
         pageVersion = pageProps.initialPage.version
     }
@@ -409,12 +409,12 @@ export const renderApp = (pageProps) => {
         resolveComponent = pageProps.resolveComponent
     }
 
-    return ({ Component, key, componentProps }) => {
+    const renderInertiaApp = ({ Component, key, componentProps }) => {
         const modalRoot = createElement(ModalRoot)
         const child = createElement(Component, { key, ...componentProps })
 
         if (typeof Component.layout === 'function') {
-            return <ModalStackProvider><>{Component.layout(child)}{modalRoot}</></ModalStackProvider>
+            return <>{Component.layout(child)}{modalRoot}</>
         }
 
         if (Array.isArray(Component.layout)) {
@@ -424,8 +424,10 @@ export const renderApp = (pageProps) => {
                 .reduce((children, Layout) => createElement(Layout, { children, ...componentProps }))
         }
 
-        return <ModalStackProvider><>{child}{modalRoot}</></ModalStackProvider>
+        return <>{child}{modalRoot}</>
     }
+
+    return <ModalStackProvider>{createElement(App, { ...pageProps, children: renderInertiaApp })}</ModalStackProvider>
 }
 
 export const ModalRoot = ({ children }) => {