<div>
        <OtherMain  >
         
          <Container>
          <ScrollRestoration />

            <Outlet />
            </Container>
                   
        </OtherMain>
         
        </div>

I created Root according to the official instructions.
Near <Outlet /> Placed <ScrollRestoration />
In createBrowserRouter, element: <AppLayout />, was placed in Child.
However, the scroll position is at the top and it does not start from the middle.

This may be unrelated, but the screen is divided into three vertically.
I am using version react-router-dom “^6.22.3”,

App.jsx

function App() {

  
  
  const router = createBrowserRouter([
    {
      path: "/",
        element: <AppLayout />,
        children:[
          {
            path: "/",
            element: <Navigate to="/login" />,
          },
          {
            path: "/home",
            element: <Home />,
          },   
        ]
        
    }
    
  ]
  );
  return (
    <React.StrictMode>
              <RouterProvider router={router}>
              </RouterProvider>
    </React.StrictMode>
  );
}

I also placed it inside RouterProvider, but it didn’t work.

I also tried passing it directly to the child’s Path, but it didn’t work.
How do I start from the middle?