in my code the stats JS page only renders for a second then it goes back to the app.js page

This is my app.js page using Router Browser and i want to switch to stats.js on pressing button 1. The stats.js page renders on pressing the button but only for less then a second and then the app.js page is rendered back

Below is the app.js code

import React from "react";
    import bgvideo from "./assets/testfootage.mp4";
    import "./background-video.css";
    import "./main-buttons.css";
    import logo from "./assets/logo.png";
    import "./logo.css";
    import Stats from "./stats";
    import {
      BrowserRouter as Router,
      Routes,
      Route,
      Link,
      useNavigate,
      Switch,
    } from "react-router-dom";

    function App() {
      const navigate = useNavigate();

      return (
        <div className="background-video">
          <video autoPlay muted loop>
            <source src={bgvideo} type="video/mp4" />
            console.log("okok");
          </video>
          <div className="logo">
            <img src={logo} alt="Logo" />
          </div>
          <div className="button-container1">
            <button onClick={() => navigate("/stats")}>
              See your Listening Stats
            </button>
          </div>
          <div className="button-container2">
            <button>Generate a Playlist</button>
          </div>
          <div className="button-container3">
            <button>Realtime Friends Playlist</button>
          </div>
          <Routes>
            <Route path="/stats" element={<Stats />} />
          </Routes>
        </div>
      );
    }


    export default App;

And this is the index.js page
I think the problem might be here

 import React from "react";
    import ReactDOM from "react-dom";
    import App from "./App";
    import { BrowserRouter } from "react-router-dom";

    ReactDOM.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
      document.getElementById("root")
    );