Undefined 'pathname' issue with connected-react-router

Question

I have a fairly simple React app that I'm having issues getting to work after adding connected-react-router. None of the pages will load and it immediately throws this error: Uncaught TypeError: Cannot read properties of undefined (reading 'pathname').

I've tried some solutions mentioned in Git like downgrading the library and made sure NavLinks have the to prop as some mentioned that being the issue. Anyone know how to fix this? I'm at a loss.

// App.js

import { ConnectedRouter } from 'connected-react-router';
import '@enterprise-ui/canvas-ui-css';
import { AuthProvider } from '@praxis/component-auth';
import configureAppStore, { history } from './app/store';
import { Provider } from 'react-redux';

import './globalStyles/customStyles.scss';
import './globalStyles/rootStyles.scss';
import { Main } from './views/Main';
import apiConfig from './globalConfig/apiConfig';

const initialState = {};
const store = configureAppStore(initialState);

const App = () => {
  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <AuthProvider {...apiConfig.auth}>
          <Main />
        </AuthProvider>
      </ConnectedRouter>
    </Provider>
  );
};

export default App;

// store.js
import { configureStore } from '@reduxjs/toolkit';
import { createBrowserHistory } from 'history';
import { connectRouter, routerMiddleware } from 'connected-react-router';

import scannerReducer from './scanner/scannerSlice';

export const history = createBrowserHistory();

export default function configureAppStore(preloadedState) {
  const store = configureStore({
    reducer: {
      router: connectRouter(history),
      scanner: scannerReducer,
    },
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware().concat(routerMiddleware(history)),
    preloadedState,
  });

  return store;
}

// Main.js
import { Routes, Route, useLocation } from 'react-router-dom';
import { ErrorBoundary } from '@praxis/component-logging';

import { ErrorContent } from '../components/ErrorContent';
import { LayoutSimple } from '../views/LayoutSimple';
import { Homepage } from '../views/Home/Homepage';
import { InstallationPage } from '../views/Installation/InstallationPage';
import { OnboardingPage } from '../views/Onboarding/OnboardingPage';
import { OnboardingForm } from '../views/Onboarding/OnboardingForm/OnboardingForm';
import { ScannerPage } from '../views/Onboarding/Scanner/ScannerPage';
import { LookupPage } from '../views/Lookup/LookupPage';

export const Main = () => {
  const location = useLocation();
  return (
    <ErrorBoundary key={location.pathname} FallbackComponent={ErrorContent}>
      <Routes>
        <Route path="/" element={<Homepage />}></Route>
        <Route path="/layout" element={<LayoutSimple />}></Route>
        <Route path="/install" element={<InstallationPage />}></Route>
        <Route path="/onboarding" element={<OnboardingPage />}></Route>
        <Route path="/scan" element={<ScannerPage />}></Route>
        <Route path="/registration" element={<OnboardingForm />}></Route>
        <Route path="/lookup" element={<LookupPage />}></Route>
      </Routes>
    </ErrorBoundary>
  );
};

// package.json
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0"
"react-redux": "8.0.5",
"connected-react-router": "6.9.3",
"history": "^4.7.2",