I have managed to get my react-router to navigate to another page on my website however after it's done redirecting the link or button in this case still persists on the other page (login.js).

Can someone explain to me why this happens, and how I get it to not render on my page?

App.js

import Login from "./login";
import React from "react";
import "./App.css";
import { Routes, Route, Router } from "react-router-dom";
import { useNavigate } from "react-router-dom";


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

    const handleClick = () => {
        navigate("/login");
    }

 return (
  <div className="Main">
    <Routes>
      <Route path="/login" element={<Login />} />
    </Routes>
    
    <button onClick={handleClick} type="button" />
</div>
  );
}
export default App;

Login.js

[![import React from "react";

export default function Login() {

    return (
        <div className="Login">
            <h1>Login</h1>
            </div>
     )}