[Dúvida] Criação de uma rota para NotFound

Olá pessoal, tudo bem?

Desde o outro curso achei um pouco de "gambiarra" ou não sei se achei muito feio trazer o < Routes > para o componente de Prato. (foi realizado isso para caso a rota ser um prato inválido, ele carregar a página de NotFound sem o header).

Então, decidi criar uma rota apenas para o NotFound, pois, sinto que resolvi 2 problemas juntos (lazyloading e o header no NotFound). Gostaria que vocês avaliassem e também quais seriam as problemáticas de performance (se houver) ou outras maneiras de resolver. Grato desde já!

Segue os códigos:

pages/Prato/index.tsx

import styles from "./Prato.module.scss";
//import { useLocation } from "react-router-dom";
import TagsPrato from "components/TagsPrato";
import cardapio from "data/cardapio.json";
import { Navigate, useNavigate, useParams } from "react-router-dom";

export default function Prato() {
  //const { state } = useLocation();
  //const { prato } = state as { prato: Prato };
  const { id } = useParams();
  const navigate = useNavigate();
  const prato = cardapio.find((item) => item.id === Number(id));
  if (!prato) {
    return <Navigate to="not-found" />;
  }
  return (
    <>
      <button className={styles.voltar} onClick={() => navigate(-1)}>
        {"< Voltar"}
      </button>
      <section className={styles.container}>
        <h1 className={styles.titulo}>{prato.title}</h1>
        <div className={styles.imagem}>
          <img src={prato.photo} alt={prato.title} />
        </div>
        <div className={styles.conteudo}>
          <p className={styles.conteudo__descricao}>{prato.description}</p>
          <TagsPrato {...prato} />
        </div>
      </section>
    </>
  );
}

src/routes.tsx

import Footer from "components/Footer";
import Loader from "components/Loader";
import Menu from "components/Menu";
//import PaginaPadrao from "components/PaginaPadrao";
// import Cardapio from "pages/Cardapio";
//import Inicio from "pages/Inicio";
//import NotFound from "pages/NotFound";
//import Prato from "pages/Prato";
//import Sobre from "pages/Sobre";

import { Suspense, lazy } from "react";
import {
  Navigate,
  Route,
  BrowserRouter as Router,
  Routes,
} from "react-router-dom";

const PaginaPadrao = lazy(() => import("components/PaginaPadrao"));
const Inicio = lazy(() => import("pages/Inicio"));
const Cardapio = lazy(() => import("pages/Cardapio"));
const Sobre = lazy(() => import("pages/Sobre"));
const Prato = lazy(() => import("pages/Prato"));
const NotFound = lazy(() => import("pages/NotFound"));

export default function AppRouter() {
  return (
    <main className="container">
      <Router>
        <Menu />
        <Suspense fallback={<Loader />}>
          <Routes>
            <Route path="/" element={<PaginaPadrao />}>
              <Route index element={<Inicio />} />
              <Route path="cardapio" element={<Cardapio />} />
              <Route path="sobre" element={<Sobre />} />
              <Route path="prato/:id" element={<Prato />} />
            </Route>
            <Route path="*" element={<Navigate to="/not-found" />} />
            <Route path="/not-found" element={<NotFound />} />
          </Routes>
        </Suspense>
        <Footer />
      </Router>
    </main>
  );
}