In my application I am using BrowserRouter component to render my routes or components . But I want to use loader functionality. but my current approach I am not able to use that feature.

 <BrowserRouter>
      <AppRoutes />
    </BrowserRouter>

As suggested by below link I need to use createBrowserRouter function .
why loader function not called in react js?
https://reactrouter.com/en/main/routers/picking-a-router

current way of routing.

export default function AppRoutes() {
  return (
    <Layout>
      <Routes>
        <Route element={<RequireAuth />}>
          <Route
            path={'/'}
            element={
              <React.Suspense
                fallback={<div>loading</div>}
                children={<Booking />}
              />
            }
          ></Route>
        </Route>
        <Route element={<RequireAuth />}>
          <Route
            path={'/app'}
            element={
              <React.Suspense
                fallback={<div>loading</div>}
                children={<App />}
              />
            }
          ></Route>
        </Route>
      </Routes>
    </Layout>
  );
}

now I am trying to refactor my routing using createBrowserRouter .. I tried like this

const router = createBrowserRouter([
  {
    path: '/',
    loader: () => {
      console.log('0000');
      return 'ss';
    },
    element: <RequireAuth />,
  },
  {
    path: '/app',
    loader: () => {
      console.log('0000');
      return 'ss';
    },
    element: <RequireAuth />,
  },
]);

how to render component (Booking and App component). how I will render children in createBrowserRouter approach .any idea ??

here is my code
https://stackblitz.com/edit/vitejs-vite-6gg4ab?file=src%2FApp.tsx,src%2Fmain.tsx,src%2Findex.css,src%2Froutes.tsx,src%2Flayout.tsx,src%2FRequireAuth.tsx,src%2Fbrowser-routes.tsx&terminal=dev