I am working on a project, using this boilerplate https://github.com/ankushjain2001/fastapi-react-mongodb and updated the dependencies for the frontend to new major versions.

I already fixed some errors, but can't get custom routes refactored properly…

This is how it is used in the App.js <ProtectedRoute path="/admin" exact strict component={Home} />

And this is the Component itself

export const ProtectedRoute = ({component: Component, ...rest}) => {
  return (
    <Route 
      {...rest}
      render={props => {
        // Goto the concerned route when authenticated
        if (auth.isAuthenticated()){
          return <Component {...props}/>
        }
        // Goto the default login page when not authenticated
        else {
          return (
            <div>
              <Landing {...props}/>
            </div>
          )
        }
      }}
    />
  );
};

The error I am getting is:

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

How can I fix this? Thanks in advance :)