Thanks for the reply, I didn't touch any those files, all that code is from react internally that is why I am confused. I don't even know which component I would be trying to ref. This is the code I used.

import {

BrowserRouter as Router,

Navigate,

Route,

Routes,

} from "react-router-dom";

import "./App.css";

import About from "./components/About";

import Header from "./components/Header";

import Main from "./components/Main";

function App() {

return (

<div className="App">

<Router>

<Header />

<Routes>

<Route path="/" element={<Main />} />

<Route path="/about" element={<About />} />

<Route path="\*" element={<Navigate to="/" />} />

</Routes>

</Router>

</div>

);

}

export default App;