Q:

Error when using Render method but not component in Route

I am currently running into the error 
"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."
I have searched the error up online and see that most of the time it is caused by someone incorrectly exporting or importing a component but I cannot seem to find where I have done that wrong.
Still, I have managed to find a way to render my component. When I use 
     PrivateRoute path="/protected" component={Protected} it works, but if I use PrivateRoute with render (render={() => < Protected/>}) it seems to give me the error. I am assuming it has to do with either the PrivateRoute or how im calling the component. Im going to include my dependencies to make sure that I am not calling it wrong. Also here is a link to my codesandbox: https://codesandbox.io/s/dawn-cherry-3yv8e?fontsize=14.
import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect,
  withRouter
} from "react-router-dom";
import "./styles.css";
import PrivateRoute from "./PrivateRoute";
import Login from "./Login";

function Protected() {
  return <h3>Protected</h3>;
}
function Public() {
  return <h3>public</h3>;
}

class App extends React.Component {
  render() {
return (
  <React.Fragment>
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/public">Public Page</Link>
          </li>
          <li>
            <Link to="/protected">Protected Page</Link>
          </li>
        </ul>
        <Switch>
          <Route path="/public" component={Public} />
          <Route path="/login" render={() => <Login />} exact />
          <PrivateRoute
            path="/protected"
            // component={Protected}
            render={() => <Protected />}
            exact
          />
        </Switch>
      </div>
    </Router>
  </React.Fragment>
);
}
}

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

function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        fakeAuth.isAuthenticated ? (
      <Component {...props} />
    ) : (
      <Redirect
        to={{
          pathname: "/login",
          state: { from: props.location }
        }}
      />
    )
  }
/>
);
}
export default PrivateRoute;

If you would like to see the rest of the code check the codesandbox that is linked above. Thanks for any help

A:

You should name your PrivateRoute prop accordingly, quick fix:
<PrivateRoute
    path="/protected"
    toRender={Protected}
    // toRender={() => <Protected />} // This should also work
   exact
/>

// Here we use render prop as Component
function PrivateRoute({ toRender: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={props => ( 
        fakeAuth.isAuthenticated
          ? (
            <Component {...props} />
          )
          : (
            <Redirect
              to={{
                pathname: "/login",
                state: { from: props.location }
              }}
            />
          )
      )}
    />
  );
}

Working example

