While react routing it goes to the "*" route not the "/" route that i have defined

Question

I want the home page to display instead of the error page on page load, without clicking the home page. I used / in exact to do so but it didn't work.

import React,{ useState } from "react";
import Navbar from "./components/Navbar";
import TextForm from "./components/TextForm";
import Alert from "./components/Alert";
import About from "./components/About";
import Error from "./components/Error";
import {
 BrowserRouter as Router,
 Routes,
 Route,
 } from "react-router-dom";

 function App() {

 return (
   <>
  <Router>
  <Navbar
    title="TextUtils"
    mode={mode}
    aboutText="About"
    toggleMode={toggleMode}
  />
  <Alert alert={alert} />
  <div className="container">
  <Routes> 
  <Route exact path="/about" element={<About mode={mode}/>}/>

  <Route exact path="/" element={<TextForm showAlert={showAlert}
    heading="Enter the text to analyze : "
    mode={mode}/>}/>

  <Route exact path="*" element={<Error/>}/>
  </Routes>
  </div>
   </Router>
</>
);
}

export default App;