Adding Pages Router Error - Property 'pathname' undefined

Question

I've tried browsing a few similar queries but haven't been able to solve my issue. I downloaded a template (am new to React) where the single-page application was entirely built in App.js. I've since been trying to add functionality to add additional pages - but keep getting the error "React Router: Cannot read property 'pathname' of undefined."

My App.js

import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'


import Mint from './components/pages/Mint'
import LandingPage from './components/pages/LandingPage'


const App = () => {
  return (
    <Router>

        <Routes>
          <Route exact path="/" element={<Mint/>}/>
          <Route path="/home" element={<LandingPage/>}/>

        </Routes>

    </Router>
  );
}

export default App;

My index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import store from "./redux/store";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import { ConnectedRouter } from 'react-router-redux';
import "./styles/reset.css";

ReactDOM.render(
  <Provider store={store}>

    <App />

  </Provider>,
  document.getElementById("root")
);

reportWebVitals();

Can confirm upon loading that the "Mint" page loads properly. But if I try and switch the exact path to LandingPage in App.js it'll give that error.

Any help would be greatly appreciated!