Custom ProtectedRoutes component does not render elements on URL match

import { JSX, createEffect } from "solid-js";
import { StoreState, useStore } from "../../store";
import { Navigate } from "@solidjs/router";

type ProtectedRouteProps = {
    accept: JSX.Element
}

const AllowAuthenticated = (props: ProtectedRouteProps) => {
    // ...

    const store: StoreState = useStore()
    return (
        store.user.isAuthenticated === true ?
            props.accept
        :
            <Navigate href={'/login'} />
    )
}

export default AllowAuthenticated;

const ProtectedRoutes = () => {

    createEffect(() => {
        console.log('> ProtectedRoutes')
    })

    const Routes = useRoutes([
        {
            path: "/",
            element: <AllowAuthenticated accept={<MainContainer />} />,
            children: [ 
                { path: ["/", "dashboard"], component: Dashboard },
                { path: "profile", component: Profile }
            ]
        },
        { path: "/login",    element: <DenyAuthenticated accept={<Login />} /> },
        { path: "/register", element: <DenyAuthenticated accept={<Register />} /> }
    ])

    return <Routes />
}