Create a modal route using React.lazy() component in React Router V6

Is it possible to create a modal route with lazy component pages? By that I mean the <Modal/> is rendered inside the <User/> page instead of being a page of its own.

A modal route is working perfectly with elements:

<Routes>          
  <Route path="user" element={<User/>}>
    <Route path="modal" element={<Modal/>} />
  </Route>
</Routes>

But when I use lazy components, the <Modal/> is not rendered inside <User/>. At /user/modal, the <User/> content is gone and the <Modal/> is rendered as a new page:

const User = lazy(() => System.import("./page/User"));
const Modal = lazy(() => System.import("./page/Modal"));
<Routes>          
  <Route path="user">
    <User/>
    <Route path="modal">
       <Modal/>
    </Route>
  </Route>
</Routes>

I have the <Outlet/> inside the User Page as per the preview article:

function User = ()=>{
   return (
     <div><Link to="modal">modal</Link><Outlet/></div>

   )
}