Why is My Nested Route Layout in React Router Dom Causing an Infinite Loading State?

I’m using createBrowserRouter to define nested routes in my React project, and I’ve set up a layout component (AppLayout) to be shared across several child routes. However, when I start the application, the page just keep loading and shows nothing.

Here are project dependencies:

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.11.0"
},

Here is my code:

const router = createBrowserRouter([
  {
    element: <AppLayout />, // Common layout for all child routes
    children: [
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "menu", // This will resolve to "/menu"
        element: <Menu />,
      },
      {
        path: "cart", // This will resolve to "/cart"
        element: <Cart />,
      },
      {
        path: "order/new", // This will resolve to "/order/new"
        element: <CreateOrder />,
      },
      {
        path: "order/:orderId", // This will resolve to "/order/:orderId"
        element: <Order />,
      },
    ],
  },
]);

When I don’t use nested route it works.