React Router v6 を使用してカスタマイズされたレイアウトで React コンポーネントをレンダリングするにはどうすればよいですか?

// AppLayout.js
import { Outlet } from 'react-router-dom';

const AppLayout = () => (
  <>
    <NavBar />
    <SideBar />
    <main className={styles['main--container']}>
      <div className={styles['main--content']}>
        <Outlet />
      </div>
    </main>
  </>
);

// App.js
import { Routes, Route } from 'react-router-dom';
import { AppLayout } from './AppLayout';
import LoginPage from './LoginPage';
import Dashboard from './Dashboard';

const App = () => {
  return (
    <>
      <Routes>
        <Route path='/login' element={<LoginPage />} />
        <Route element={<AppLayout />}>
          <Route path='/' element={<Dashboard />} />
        </Route>
      </Routes>
    </>
  );
};