Как реализовать локальную навигацию в React?

Question

[Nik Faraday]

Настроена маршрутизация на главной странице App.tsx:

import { Index as PrinterIndex } from "./pages/printer/Index";
const App = () => {
    return(
        <BrowserRouter>
            <Header />
            <Sidebar />

            <Layout style={{ marginInlineStart: 'calc(20% + 10px)', backgroundColor: '#33393f', minHeight: '100hv' }}>
                <Routes>
                    <Route element={<Dashboard/>} path="/" />
                    <Route element={<PrinterIndex />} path="/printer/:id" />
                    <Route element={<NotFound />} path="*" />
                </Routes>
            </Layout>
        </BrowserRouter>
    )
}

export default App;

На этой странице хочу настроить ещё локальную навигацию:

export const Index: React.FC = () => {
    const { id } = useParams<{ id: string }>();
    const navigate = useNavigate();
    const location = useLocation();
    const printerOptions : OptionNavigator[] = [
        { label: 'Printing', path: 'printing' },
        { label: 'Settings', path: 'settings' }
    ];

    return (
        <Row>
            <Col span={18}>
                <Row>
                    <Col span={6}>
                        {
                            printerOptions.map((option, index) => (
                                <PrinterOptions 
                                    label={option.label} 
                                    onClick={() => navigate(`/printer/${id}/${option.path}`)} 
                                    key={index} 
                                />
                            ))
                        }
                    </Col>
                    <Col span={18}>
                        <Routes location={location}>
                            <Route path="printing" element={<EmptyFileLoader />} />
                            <Route path="settings" element={<Settings />} />
                        </Routes>
                    </Col>
                </Row>
            </Col>
            <Col span={6}>
                <CommonInformation id={id!} />
            </Col>
        </Row>
    );
};

Но при нажатии выполняется общая навигация по сайту, а не рендринг соответствующего компоненты в соответствующем окне. Как её правильно настроить?