React Ts trying to create guarded routed but getting an error

Hi I tried creating guards for my routes but I am getting this error:

[Error] Error: [GuardedRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

This is my code:

GuardedRoute.tsx-

import { Route, Navigate } from 'react-router-dom';
import { useUserInfo } from '../context/UserContext';

export const GuardedRoute = ({ path, element: Element, ...rest }: any) => {
  const { userInfo } = useUserInfo();

  if (userInfo.id !== '') {
    return <Route path={path} element={Element} {...rest} />;
  } else {
    return <Navigate to="/" replace />;
  }
};

App.tsx

 <BrowserRouter>
                <Nav></Nav>
                <div className="w-[100vw] fixed top-[50px] z-[100] flex flex-col">
                {
                  ErrorMessages.map((message,index)=>(
                      <div className="w-[300px] h-[50px] mt-[10px] mx-auto bg-red-600/90 rounded-md grid place-content-center" key={index}>
                        <p className="font-bold text-gray-200 text-center">{message}</p>
                      </div>
                  ))
                }
                </div>
                  <Routes>
                    <Route path="/" element={<Home />} />
                    <GuardedRoute path="/profile/:select?" element={<Profile />} />
                    <GuardedRoute path="/checkout" element={<CheckOut />}/>
                    <Route path="/register" element={<Register />} />
                    <Route path="/login" element={<Login />} />
                    <Route path="/browse" element={<Browse />} />
                    <Route path="/product/:id" element={<Product />} />
                    <Route path="/404"  element={<PageNotFound />}/>
                    <Route path="*"  element={<Navigate to="/404" />}/>
                  </Routes>
                </BrowserRouter>

Does anyone have a solution for this error? thanks.

It is better to put all the private routes inside Authguard instead of providing Authguard to each component. you can customize the auth, like if there is cookie exists of particular user, then auth is true, otherwise false.

import { Outlet, Navigate } from 'react-router-dom';

const Authguard = () => {

    let auth = false;
    return(
        auth ? <Outlet/> : <Navigate to="/"/>
    )
}

export default Authguard

Now you Routes will be like, e.g in App.tsx

  function App(){
    return(
     <Routes>
          <Route path="/" element={<Login />} />
    
           <Route element={<Authguard />}> 
               <Route path="/register" element={<Register />} />
               <Route path="/home" element={<Home />} />
          </Route>
     </Routes>)
    }

This shows your Register and Home components are private, and Login component is public.