title: React-Router render : Functions are not valid as a React child
body: <ol>
  <li><p>I have created a HOC &quot;ProtectedRoute&quot; to restrict paths for unauthenticated users. I have used &quot;react-router-dom&quot; for routing in the application.</p>
  </li>
  <li><p>I am able to route the users based on their token but I am receiving a warning in the console and I am unable to access routerprops such as &quot;history&quot;, &quot;location&quot;, &quot;match&quot; in rendered component. Below is the ProtectedRoute component implementation.</p>
  <pre><code>const ProtectedRoute = ({component:Component, ...rest}) =&gt; {
      const [isLoggedIn, setLoggedIn] = useState({loggedIn:false, loaded:false})
      useEffect(async () =&gt; {
          const userStatus = await validateUserLoggedIn();  # returns true if user is authenticated
          setLoggedIn((prevState) =&gt; {return {loggedIn:userStatus, loaded:true}})
      }, [])
  
      return(
          &lt;Route {...rest} render={(routerProps) =&gt; {
              return isLoggedIn.loaded ?
              isLoggedIn.loggedIn ? &lt;Component {...routerProps} {...rest} /&gt; : &lt;Redirect to={{pathname:'/login'}} :
              &lt;h1&gt;Loading Page&lt;/h1&gt;
          }} /&gt;
      )
  }
  </code></pre>
  </li>
  <li><p>ProtectedRoute in main routing component:</p>
  <pre><code>&lt;Switch&gt;
      &lt;ProtectedRoute exact path=&quot;/admin&quot; component={Admin} /&gt;
  &lt;/Switch&gt;
  </code></pre>
  </li>
  <li><p>Error Message &quot;Functions are not valid as a React child. This may happen if you return a Component instead of  from render. Or maybe you meant to call this function rather than return it&quot;.</p>
  </li>
  </ol>
  <p>Any suggestion is appreciated.</p>