React Router v6.4: Render different layout elements under the same root route

I am trying to set up an app where couple of internal routes share the same layout, and couple of auth routes share the same layout, eg:

AuthLayout: /login, /sign-up, etc.

AppLayout: /dashboard, /settings, etc.

My current setup is like this:

const router = createBrowserRouter([
    {
        path: '/',
        element: (
            <AppLayout>
                <Outlet />
            </AppLayout>
        ),
        loader: () => {
            const user = auth?.currentUser;
            if (!user) {
                return redirect('/login');
            }
            return redirect('/dashboard');
        },
        children: [
            {
                index: true,
                element: <div>home</div>,
            },
            {
                path: 'dashboard',
                element: <div>dashboard</div>,
            },
            { path: 'settings', element: <div>settings</div> },
        ],
    },
    {
        path: 'login',
        element: (
            <AuthLayout>
                <div>login</div>
            </AuthLayout>
        ),
    },
    {
        path: 'sign-up',
        element: (
            <AuthLayout>
                <div>sign up</div>
            </AuthLayout>
        ),
    },
]);

It works fine I guess, but ideally I'd like for the auth routes to be in the same structure as the AppLayout routes where it has path: '/', element: <AuthLayout><Outlet/></AuthLayout> and just have the /login, /sign-up as children routes, since they share the same AuthLayout and there will be more routes for that too. My current struggle is that both internal and auth routes share the same root path of '/' so I am not too sure how to structure it.

I guess it's not the end of the world if I give one of the route-group another parent root route but would prefer not to. So just curious if anyone's encountered this situation and figured out a clean way to do it.

Thanks!