react-router-dom v6 upgrade - vs

Question

I'm fairly new to React, but going through the process of upgrading react-router-dom package from v5 -> v6. I'm experiencing an error at what appears to be a fairly fundamental level, which doesnt seem to be documented in the migration guide - [https://github.com/remix-run/react-router/discussions/8753]- unless I'm missing the point somewhere.

Anyway, our App.js component looks like this:

function App() {
  ...
  return (
    <CurrentUserContextProvider>
      {/* <BrowserRouter> */}
      <Router history={history}>
        <div ...>
          <Header />
          <MainBody />
        </div>
      </Router>
      {/* </BrowserRouter> */}
    </CurrentUserContextProvider>
  );
}

export default App;

and 'history' comes from:

import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

After upgrading to 6.7, I'm faced with the following error message as soon as soon as the application starts:

Having looked around and watched a few (seemingly knowledgeable) YouTube videos, the consensus seemed to be "use BrowserRouter rather than Router..." although I'll fully admit that this is pretty -much guesswork on my part. The people who coded the original app are no longer available to me, but cant imagine they coded it as-is (i.e. using Router)without good reason.

Making this change does indeed make the initial error message go away, although I now seem to be in the position where browsing history is no longer available (which seems predictable given what I subsequently found about BrowserRouter doing something else to maintain history).

Consequently, it feels like changing Router -> BrowserRouter might not be the correct thing to do and I'm slightly unsure what the next move should be to resolve this...most definitely grateful for any thoughts and/or input.

Thanks in advance,