Error: [ProtectedRoute] is not a component. All component children of must be a or

Question

I know there are questions on stackoverflow that solve similar problems. I tried the answers to this question but without success. Here is the content of my base ProtectedRoute.js file:

import React from 'react'
import { Navigate, Route } from 'react-router-dom'

function ProtectedRoute({ component: Component, isLoggedIn, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) => {
        if (isLoggedIn) {
          return <Component {...rest} {...props} />
        } else {
          return (
            <Navigate to={{ pathname: '/', state: { from: props.location } }} />
          )
        }
      }}
    />
  )
}

export default ProtectedRoute

and the same file after testing the answers from the question linked above:

import React from 'react'
import { Navigate } from 'react-router-dom'

const ProtectedRoute = ( Component, isLoggedIn,  props, ...rest ) => {
  // determine if authorized, from context or however you're doing it

  // If authorized, return an outlet that will render child elements
  // If not, return element that will navigate to login page
  return isLoggedIn ? <Component {...rest} {...props} /> : <Navigate to={{ pathname: '/', state: { from: props.location } }} />;
}
export default ProtectedRoute

The content of my App.js file is:

          ...

 <Routes>
                          <Route
                            exact
                            path="/"
                            render={(props) =>
                              !userState.isLoggedIn ? (
                                <Auth />
                              ) : (
                                < Navigate to="/home" />
                              )
                            }
                          />
                          <ProtectedRoute
                            exact
                            path="/friends"
                            component={Friends}
                            isLoggedIn={userState.isLoggedIn}
                          />

             ...

Despite all my changes to the ProtectedRoute.js file I get the same error.