Не срабатывает ErrorPage на вложенных маршрутах React Router 6

import * as React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { ErrorPage } from '../../pages/ErrorPage/ErrorPage';
import { MainPage } from '../../pages/MainPage/MainPage';
import { RegistrationPage } from '../../pages/RegistrationPage/RegistrationPage';
import { LoginPage } from '../../pages/LoginPage/LoginPage';
import { Layout } from '../../components/visual/layout/Layout';
import { ProtectedRoute } from './ProtectedRoute/ProtectedRoute';
import { ProfilePage } from '../../pages/ProfilePage/ProfilePage';
 
export const AppRouter = () => {
  const [modalContent, setModalContent] = React.useState<React.ReactNode>(null);
  const [showModal, setShowModal] = React.useState(false);
 
  const openModal = (content: React.ReactNode) => {
    setModalContent(content);
    setShowModal(true);
  };
 
  const closeModal = () => {
    setShowModal(false);
  };
 
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/"
          element={<Layout openModal={openModal} closeModal={closeModal} showModal={showModal} modalContent={modalContent} />}
        >
          <Route index element={<MainPage openModal={openModal} />} />
          <Route
            path="registration"
            element={
              <ProtectedRoute openModal={openModal} closeModal={closeModal}>
                <RegistrationPage openModal={openModal} />
              </ProtectedRoute>
            }
          />
          <Route
            path="login"
            element={
              <ProtectedRoute openModal={openModal} closeModal={closeModal}>
                <LoginPage openModal={openModal} />
              </ProtectedRoute>
            }
          />
          <Route
            path="profile"
            element={
              <ProtectedRoute openModal={openModal} closeModal={closeModal}>
                <ProfilePage openModal={openModal} />
              </ProtectedRoute>
            }
          />
        </Route>
        <Route path="*" element={<ErrorPage />} />
      </Routes>
    </BrowserRouter>
  )
};

      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="dashboard" element={<Dashboard />} />
 
          {/* Using path="*"" means "match anything", so this route
                acts like a catch-all for URLs that we don't have explicit
                routes for. */}
          <Route path="*" element={<NoMatch />} />
        </Route>
      </Routes>