useNavigate adding div to page instead of navigating?

I am new to using React to build a website and am trying to navigate to another page using the useNavigate() function provided by react-router. I have a separate file/component called About.tsx that I am trying to navigate to using the onClick property of a button located on the main page of my website. When I click the button however, the contents of my About.tsx page, which is simply a div for now, get tacked on to the side of my main page. The functionality I am looking for is for the button to navigate to a completely new blank page containing the div only. Is this possible using useNavigate() and if so how should I fix this, or do I need to look into other potential solutions. My code is attached below:

About.tsx:

export const About = () => {
  return <div>About</div>;
};

Main Page:

import { useNavigate, Route, Routes } from "react-router";
import { About } from "./About";
type ButtonProps = {
  text: string,
  onClicked: Function,
};

function Button({ text, onClicked }: ButtonProps) {
  return (
    <button
      className="px-5 border-sky-700 border-2 text-sky-600 rounded-full transform hover:bg-gray-800 hover:scale-125 transition duration-200"
      onClick={() => onClicked()}
    >
      {text}
    </button>
  );
}

function Nav() {
  let navigate = useNavigate();
  function navPath(path: string) {
    navigate(path);
  }
  return (
    <div className="shadow-xl bg-sky-800 bg-opacity-10 md:w-3/2 lg:w-[60rem] top-10 h-16 flex items-center absolute justify-center space-x-12 z-10 rounded-full overflow-hidden">
      <div className="w-50 items-center flex">
        <Button text="Who Am I" onClicked={() => navigate("./About")} />
      </div>
    </div>
  );
}

function App() {
  return (
    <main>
      //a few divs
      <Routes>
        <Route path="/About" element={<About />} />
      </Routes>
    </main>
  );
}
export default App;

Index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./pages/App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
reportWebVitals();

I have tried rewriting the functions as well as reformatting the About page. Other YouTube tutorials and ChatGPT have not helped either. Any assistance would be greatly appreciated!

I am also new to StackOverflow so if I missed anything, please do let me know and I would be happy to update this post! Also my apologies for the poor formatting! Thank you!

//a few divs will be displayed anyway since they are returned and do not depend on the <Routes> component. you may want to create a route for your divs as you call them main page:

<main>
  <Routes>
     <Route path = "/" element={<MainPage/>}/>
  </Routes>   
  <Routes>
     <Route path = "/About" element={<About/>}/>
  </Routes>
</main>

function MainPage(){
  //...
  let navigate = useNavigate()
  function navPath(path:string){
    navigate(path)
  }
  return (
    <>
    // few divs 
    // few divs 
    <div className = "shadow-xl bg-sky-800 bg-opacity-10 md:w-3/2 lg:w-[60rem] top-10 h-16 flex items-center absolute justify-center space-x-12 z-10 rounded-full overflow-hidden">
        <div className = "w-50 items-center flex">
        <Button text="Who Am I" onClicked={()=>navigate("/About")}/>
        </div>
    </div>
    </>
  )
}

Note: navigate("/About") without .<br> you just specify the path