Error: [div] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

import React, { useState } from "react";
import Counters from "./Counters";
import Navi from "./Navbar";
import Textbox from "./Textbox";
import About from "./About";
import Alerts from "./Alerts";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
const App = () => {
  // const [alert,setalert]=useState()
  // const Showalert=(message,type)=>{
  //     setalert({
  //         msg: message,
  //         typ: type,
  //     })

  // }
  return (
    <React.Fragment>
      <Navi></Navi>
      <Alerts className="container" alrt={alert} />
      <Router>
        <Routes>
          <Route path="/">
            <div className="container my-3">
              <Textbox head="Enter Your Text here..." />
            </div>
          </Route>
          <Route exact path="/About">
            <About></About>
          </Route>
        </Routes>
      </Router>
     
    </React.Fragment>
  );
};
export default App;

Here is my app.js code I have installed react-router dom version 6 and used routes instead of swicthes still i am getting this error. I also tried to put react.fragment under routes but still the error was not gone. Please help as I am new to react.

And don't read the next lines i copy paste the same lines because stackoverflow requires more lines and i don't have anything extra to say.

Here is my app.js code I have installed react-router dom version 6 and used routes instead of swicthes still i am getting this error. I also tried to put react.fragment under routes but still the error was not gone.