Reactjs – React useNavigate does not take to the desired page

I am creating basic react application and I have a problem with setting up the navigation. The below is a code for a Navbar component which once the user clicks logout button should clear the authentication context and take the user to the root page of application. However, when i click the button it enters the handler, clears the auth context but then remains on the same page/url. Below is how Navbar and Routes are being created in my application:

`const Navbar = () => {
    const { setAuth } = useContext(AuthContext)
    const navigate = useNavigate();
    const handleLogout = (e) => {
        setAuth(null)
        navigate("/");
        console.log("logout has been clicked");
    } 
    return (
        <nav>
            <input type="checkbox" id="check"/>
            <label for="check" className="checkbtn">
                <i className="fas fa-bars">Quz</i>
            </label>
            <label className="logo">Create Your Best Team</label>
            <ul>
                <li><Link to="">Messages</Link></li>
                <li><Link to="/student" className="active">Profile</Link></li>
                <li><Link to="">My Group</Link></li>
                <li><Link onClick={handleLogout}>Logout</Link></li>
            </ul>
        </nav>
    )
}

export default Navbar;`

`import Login from './components/Login'
import Student from './components/Student';
import Teacher from './components/Teacher'
import Navbar from './components/Navbar/Navbar';
import { MantineProvider } from '@mantine/core';


import { Routes, Route } from 'react-router-dom';
import { useContext } from "react"
import RequireAuth from './customHooks/RequireAuth';
import AuthContext from "./context/AuthProvider";

function InnerApp() {
  const { auth } = useContext(AuthContext)
  return (
      <MantineProvider>
        {auth?.name ? <Navbar /> : <div></div>}
        <Routes>
          <Route exact path='/' element={<Login />} />
          <Route exact element={<RequireAuth authID={{id: 1}}/>}>
            <Route exact path='/teacher' element={<Teacher />}/>
          </Route>
          <Route exact element={<RequireAuth authID={{id: 2}}/>}>
            <Route exact path='/student' element={<Student />}/>
          </Route>
        </Routes>
      </MantineProvider>
  );
}

export default InnerApp;`

`const RequireAuth = (props) => {
    const {auth} = useContext(AuthContext);
    // console.log(props.authID.id);
    // console.log(auth?.id);
    return (
        auth?.id === props.authID?.id ? <Outlet /> : <div>404 Cannot go to his link</div>
    )
}

export default RequireAuth`

I noticed that actual navigate command works by trying navigate(-1), which takes me to the previous page. However, since I will start adding more pages, going to the previous page is not sufficient and I want to redirect the client to the main page. I am assuming there is something with the Routes, Route I set up. Thank you for your help.