I have a project using react-router v6, and I am getting an error stating useNavigate() may be used only in the context of a <Router> component. For some background, I have two projects that live in the same repo and get built together. We leverage code splitting and import them as needed, not sure if this matters.

Now, I have a setup that is pretty simple:

(in the @dummyInc/components project)

Dummy.tsx

import React from 'react'

export function Dummy() {
  const navigate = useNavigate()

  return <div> Hello World <button onClick={() => navigate('/someRoute')}> </div>
}

Then my code uses it in a different project that is just imported.

(in the @dummyInc/site project)

App.js

import React from 'react'
import Dummy from '@dummyInc/components'

export function App() {
  return <div> <Dummy /> </div>
}

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'

import App from './src/App'

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
)

Now I have the above and when I try to render it in the browser, it says the following, but I'm not sure how that's possible, it's being rendered in that context.

Error: useNavigate() may be used only in the context of a <Router> component.

Am I missing something? Any help is appreciated.