The problem of nested routes not loading in React Router version 6

Question

When I send a quoteId and try to open a comment for it, the Comments component does not load. I tried to do this using a loadable component, but it still didn't work I don't have any errors in my console, there are only a few warnings as follows:

You rendered descendant (or called useRoutes()) at "/quotes/q1" (under ) but the parent route path has no trailing "". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render. Please change the parent to .*

import loadable from '@loadable/component';
// const Comments = loadable(() => import('../components/comments/Comments'));

const QuoteDetail = () =>
{
    const params = useParams();
    const quote = DUMMY_QUOTES.find(item => item.id === params.quoteId);

    const btnComment =
        <div className='centered'>
            <Link className='btn--flat' to={`/quotes/${params.quoteId}/comments`}>Load Comments</Link>  
        </div>
        
    return (
        <>
            <HighlightedQuote text={quote.text} author={quote.author} />

            <Routes>
                <Route path={`/quotes/${params.quoteId}`} element={btnComment} />
                <Route path={`/quotes/${params.quoteId}/comments`} element={<Comments />} />
            </Routes>
        </>
    )
}

import { Route, Routes } from "react-router-dom";
import AllQuotes from "./pages/AllQuotes";
import QuoteDetail from "./pages/QuoteDetail";
import NewQuote from "./pages/NewQuote";
import Layout from "./components/layout/Layout";
import NotFound from "./pages/NotFound";

const App = () =>
{
    return (
        <Layout>
            <Routes>
                <Route path="/" element={<AllQuotes />} />
                <Route path="/quotes" element={<AllQuotes />} />
                <Route path="/quotes/:quoteId" element={<QuoteDetail />} />
                <Route path="/new-quote" element={<NewQuote />} />
                <Route path="*" element={<NotFound />} />
            </Routes>
        </Layout>
    );
}