React-router-dom 6.8.1 и react 18.2.0 <Link> только обновленный URL

Я использую react-router-dom 6.8.1 и react 18.2.0 и пытаюсь настроить маршрутизатор браузера с помощью функций createBrowserRouter() и createRoutesFromElements(). Затем я визуализирую свой браузерный маршрутизатор с помощью компонента <RouterProvider>, и главная страница моего веб-сайта отображается нормально (компонент App работает). По какой-то причине любые компоненты react-router-dom <Link>, которые я помещаю в свои компоненты, отображаются на главной странице, но когда я нажимаю на них, меняется только URL-адрес, а не обновляется пользовательский интерфейс. Странно то, что если я использую <Outlet>, пользовательский интерфейс из дочерних маршрутов будет отображаться, когда я нажимаю на любые ссылки, но это не то, что я хочу. Мне нужно перейти на отдельную страницу.

Здесь я создаю маршрутизатор браузера:

import * as ReactDOM from 'react-dom/client';
import {
    createBrowserRouter,
    createRoutesFromElements,
    Route,
    RouterProvider,
} from 'react-router-dom';

import App from './app/app';
import ParticipantProfile from './app/profiles/participantProfile';

const browserRouter = createBrowserRouter(
    createRoutesFromElements(
        <Route path = "/" element = {<App />}>
            <Route path = "profile" element = {<ParticipantProfile />} />
        </Route>
    )
);

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);

root.render(<RouterProvider router = {browserRouter} />);

Вот где я создаю свой <Link>:

import { Link } from 'react-router-dom';
import { createTheme } from '@mui/material/styles';

const theme = createTheme();

function App() {
    return <Link to = "profile">Profile</Link>;
}

export default App;

Я пробовал визуализировать сам компонент <BrowserRouter> вместо использования createRoutesFromElements, но результаты те же. Изменение пути с profile на /profile тоже ничего не дает.