How to use ProtectedRoute in React?

Question

ERROR [ProtectedRoute] is not a component. All component children of <Routes> must be a <Route> or <React.Fragment>

import React from "react";
import { 
    BrowserRouter as Router, 
    Routes,
    Route,
    Navigate,
    Link 
    } from "react-router-dom";
import AuthApi from "./AuthApi";

const  ProtectedRoute = ({auth, component:Component,...rest}) => {
    return (
        <Route
        {...rest}
        render = {() => auth? (
            <Component/>
        ):
         (
            <Navigate to = "/login"/>
         )
    }
        />
    )
}

I am note able to use the ProtectedRoute function