private route in react router dom v6 is giving me no error but its not working

Question

App.js

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'
import LoginPage from "./pages/LoginPage"
import { BrowserRouter, Routes, Route  } from "react-router-dom";
import HomePage from './pages/HomePage';
import SignUpPage from './pages/SignUpPage'
import UserPage from './pages/UserPage';
import RequireAuth from './pages/RequireAuth';
function App() {
  

  return (
    <>
    <BrowserRouter>
    <Routes>
      <Route exact path="/" element={<HomePage/>}/>
      <Route path="login" element={<LoginPage/>}/>
      <Route path="signup" element={<SignUpPage/>}/>
      <Route path=":user/userpage" element={
      <RequireAuth redirectTo="/login">
         <UserPage />
      </RequireAuth>} 

      />
    </Routes>
    </BrowserRouter>
    
      
    </>
  )
}

export default App

UserPage.jsx

import { useEffect, useState } from "react";

function UserPage(props) {

    const name =(location.state?.name) || "";
    const[isLoading,setIsLoading]=useState(false)


    
    return <div>
        <h1>Hello {name}</h1>
    
        {isLoading &&<h2>Loading...</h2>}
        
    </div>

}
export default UserPage

RequiredAuth.jsx

import React from "react";
import axios from "axios";
import { Navigate } from "react-router-dom";
 function RequireAuth({ children, redirectTo }) {
      axios.get("/api/dashboard")
      .then(response=>{
        return response.data ? children :<Navigate to={redirectTo}/>
      })
     

      
    }
     

 export default RequireAuth

So, I set up a "private route by creating A component called RequireAuth. It's giving me no errors but nothing is being displayed on the page. Even when the account is not authenticated it doesnt redirect. I think it has to do with this code(return response.data ? children :<Navigate to={redirectTo}/>) in the RequireAuth.jsx that doesn't execute properly.