I am using ReactRouterV6 to lazy load a router,

When I use lazy prop, in this case my fallback UI defined in RouterProvider not coming up.

Fallback Element only coming when I directly to the path, but when I push the path using navigate or Link , then fallback UI is not coming.

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route
        path="/"
        lazy={() => import("./pages/detail")}
        element={<Suspense fallback={<h1>hello</h1>}>{/* <X /> */}</Suspense>}
      />
      <Route path="/a" element={<PageA />} action={foromAction} />
      <Route path="/b" element={<PageB />} action={foromAction} />
    </>
  )
);

And When I change my syntax like this:

const X = lazy(() => import(“./pages/detail”));

<Route
        loader={loader}
        path="/" //lazy={() => import("./pages/detail")}
        element={
          <Suspense fallback={<h1>hello</h1>}>
            <X />
          </Suspense>
        }
      />

then the fallback UI is coming,

Now the problem with this approach is that, I have to pass loader explicitly.i
and also I am curious why fallback UI is not coming with lazy prop.

In My ./pages/detail Component, I have exported Component,loader and a default export for component.