I'm trying to migrate react-router-dom from v5 to v6 and I'm having a trouble, here is my implementation with using Suspense

<Suspense
   fallback={
     <div className="center-div">
        <LoadingDots />
     </div>
   }
>
    <Routes>
        {routes.map((route, index) => (
           <Route
              path={route.path}
              key={route.path}
              element={lazy(() => import("./features/apps/AppsListPage"))} //it is route.component but for simplify example i'm show it like this
          />
        ))}
    </Routes>
</Suspense>

can someone tell me why browser return me this kind of error?

index.tsx:13 Error: Objects are not valid as a React child (found: object with keys {$$typeof, _payload, _init}). If you meant to render a collection of children, use an array instead.

I think that it caused by using lazy in element prop, but can i fix this?

Thanks for any help!