How to protect routes in reactjs?

I want to protect my register and login routes from user when user is successfully authenticated, I saw a freecodecamp youtube video “Protected Routes in React using React Router” but It does not render anything on page Here is my approch,

<ProtectedRoutes exact path="/register" component={(routeProps) => <Register {...routeProps} />} />
<ProtectedRoutes exact path="/login" component={(routeProps) => <Login {...routeProps} />} />

definition of “ProtectedRoutes”

import React from "react";
import { Route, Redirect } from "react-router-dom";

const ProtectedRoutes = ({ component: Component, }) => {
    // console.log(component);
    return (
        <Route {}
                (props) => {
                    return <component {...props} />
            } />

export default ProtectedRoutes;

and why here rename “component: Component” property cause when I pass this

component={(routeProps) => <Register {...routeProps} />}

here It name is “component”

If you use component: Component, then you must use return <Component {...props} />