Cannot read properties of undefined (reading 'pathname') can't figure out

Question

I can manage to understand why I'm getting this error...

Anyone has any idea what I'm doing wrong?

code:

import { Box, Flex } from "@chakra-ui/react";
import { Route, Routes, Router, NavLink } from "react-router-dom";
import NavBar from "./misc/NavBar";
import NewClameCard from "./pages/NewClameCard";
import Home from "./pages/Home";
import routes from "./config/routes";

// import Home from "./pages/Home";

function App() {
  return (
    <Box>
      <Router>
        <NavBar />
        <Flex justifyContent="center" align="center">
          <NewClameCard />
        </Flex>
        <h1> Hello React!</h1>
        <Routes>
        
          <Route path="/home" element={<Home />}></Route>
        </Routes>
      </Router>
    </Box>
  );
}

export default App;

this is the error message:

components.tsx:197 Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')