I cant put Navbar on main.jsx on react

I’m currently learning React and I have this code on my main.jsx:

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Navbar></Navbar> <--- The issue
    <RouterProvider router={router} />
  </React.StrictMode>,
)

If I put the Navbar component here, it is giving me this error on console:

Uncaught TypeError: React2.useContext(…) is null

My Navbar Component

import React from 'react'
import { Link } from 'react-router-dom'

const Navbar = () => {
    return (
        <div>
            <Link to='/'>Home</Link>
            <br />
            <Link to='/dashboard'>Dashboard</Link>
            <br />
            <Link to='/contact'>Contact</Link>
        </div>
    )
}

export default Navbar

I can use Navbar on other components if I put it there but not on main.jsx. What Im trying to do basically is add the Navbar component to all the pages. Do that is why I added it there.

Any help would be appreaciated.