Bellow are my imports:

import React, { useState } from "react";
import { HashRouter as Router, Routes, Route, Link, useLocation} from "react-router-dom";
import './App.css';
import Home from "./components/Home";
import About from './components/About';
import Works from "./components/Works";
import Contact from "./components/Contact";

And bellow is the App component:

function App() {
  window.document.body.style.background = "url('images/bg-image-3.png') no-repeat center center fixed";
  window.document.body.style.backgroundSize = "cover";

  const location = useLocation();

  return (
    <Router>
      <div className="App">
        <Routes location={location} key={location.pathname}>
          <Route path='/' element={ <Home/> }/>
          <Route path='/about' element={ <About/> }/>
          <Route path='/works' element={ <Works/> }/>
          <Route path='/contact' element={ <Contact/> }/>
        </Routes>
      </div>
    </Router>
  );
}

Now when I run the code my app is totally broken and I'm hit with the following error:

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

The issue persist even when I remove the const location = useLocation() declaration and use useLocation() directly to send props to <Routes> as given bellow:

return (
    <Router>
      <div className="App">
        <Routes location={useLocation()} key={useLocation().pathname}>
          <Route path='/' element={ <Home/> }/>
          <Route path='/about' element={ <About/> }/>
          <Route path='/works' element={ <Works/> }/>
          <Route path='/contact' element={ <Contact/> }/>
        </Routes>
      </div>
    </Router>
  );

Can someone please give me some hint as to what I should be doing differently?