How to pass a custom "App" component with nested components to the "renderApp" method

[Baspa]

Currently I render my root component in Inertia (React) like this:

createInertiaApp({
    progress: {
        color: "#F19E18",
        delay: 150
    },
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob("./Pages/**/*.jsx")
        ),
    setup({ el, App, props }) {
        root.render(
            <FlareErrorBoundary>
                <HotkeysProvider>
                    <RecoilRoot>
                        <State auth={props?.initialPage?.props?.auth}>
                            <App {...props} />
                        </State>
                    </RecoilRoot>
                </HotkeysProvider>
            </FlareErrorBoundary>
        );
    },
});

The docs suggest to replace the root.render(...) with this:

import { renderApp } from '@inertiaui/modal-react'

createInertiaApp({
    setup({ el, App, props }) {
        const root = createRoot(el);

        root.render(
            renderApp(App, props) 
        );
    }
});

Simply putting the JSX in the renderApp like this returns errors:

root.render(
            renderApp(
                <FlareErrorBoundary>
                    <HotkeysProvider>
                        <RecoilRoot>
                            <State auth={props?.initialPage?.props?.auth}>
                                <App {...props} />
                            </State>
                        </RecoilRoot>
                    </HotkeysProvider>
                </FlareErrorBoundary>,
                props,
            ),
        );

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Any suggestions on how to fix this?

[pascalbaljet]

Closed in #54