Использование MantineProvider с React Router

Я пишу веб-сайт на ReactJS и использую Mantine для стилизации. Когда я пытаюсь использовать реагирующий маршрутизатор, как показано ниже, компоненты mantine больше не работают.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import { MantineProvider } from '@mantine/core';

import Home from './pages/Home';
import Explore from './pages/Explore';
import './index.css';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/explore',
    element: <Explore />,
  }
]);

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <MantineProvider>
      <RouterProvider router = {router} />
    </MantineProvider>
  </StrictMode>,
);

Я читал о MantineProvider, но не смог найти ничего об этой проблеме и способах ее решения. Там сказано, что провайдер должен находиться в корне сайта.

Вот как это должно выглядеть.

Вот как это выглядит при добавлении роутера