I am getting a partial output on using React

so I am creating a Private Route but I am getting a partial output means all the content is not visible on the screen and I am getting a warning : You rendered descendant <Routes> (or called useRoutes()) at "/homepage" (under <Route path="/homepage">) but the parent route path has no trailing "*". and when I change path from ‘/homepage’ to ‘/homepage/* I still get partial output but without any warning..

this is the output without any content..

enter image description here

PrivateRoute.js

import React from 'react'
import { Route, Navigate, Routes } from 'react-router-dom'
import { useAuth } from '../Contexts/AuthContext'

export const PrivateRoute = ({ component: Component, ...rest }) => {

    const { currentUser } = useAuth()
    return(
        <Routes>
             <Route
            {...rest}
            render = {props => {
                return currentUser ? <Component {...props} /> : <Navigate to = '/' />
            }}
            >
            </Route>
        </Routes>
    )
}

App.js

<Router>
              <AuthProvider>
                <Routes>
                  <Route exact path = '/' element = {<BrandName/>}/>
                  <Route path = '/signup' element = {<SignUp />} />
                  <Route path = '/login' element = {<Login />} />
                  <Route path = '/homepage' element = {<PrivateRoute component={<HomePage />} />} />
                </Routes>
              </AuthProvider>
</Router>

can anyone solve this ?