Using MantineProvider with React Router

I am writing a website in ReactJS and I am using Mantine for styling. When I try to use react router as seen below, the mantine components no longer work.

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>,
);

I read about the MantineProvider but couldn't find anything about this issue/ how to fix it. It says the provider should be at the root of the website.

This is what its meant to look like.

This is what it looks like when adding the router

The fix was adding this import in main.tsx:

import '@mantine/core/styles.css';  // Adjust path if necessary