pass props with Lazy loading in react-router-dom v6

Question

I need to pass props to the lazy components.

const A = React.lazy(() => import("./A"));

function App() {
return (
      <Suspense fallback={<GlobalLoader />}>
        <Routes>
          <Route path="firstPath" element={<A />} />
        </Routes>
      </Suspense>
)
}

Answer 1

It is not possible in this outer context

const AWrapper= () => {
  const { path } = useParams();
  if(path.id){
      return <A prop={path.id} />
  } else{
      return <A props="default" />
  }
};