title: Issue updating state to reflect that the user is logged in. Navigating to '/home/ redirects me back to the login page even though state shows as true
body: <p>I have the initial login configured where a user is able to login and get redirected to home, however, I'm running into an issue updating the state using { useEffect }. The state [isAuthenticated] appears to be updating correctly after viewing the console (see screenshot below), however, when I try to navigate to '/home' the protected route restricts me for some reason.</p>
  <p><strong>Console.log</strong></p>
  <p><em>False</em> represents the initial state of [ isAuthenticated ] and <em>True</em> represents the state after { useEffect } runs.</p>
  <p><a href="https://i.stack.imgur.com/fCUcb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fCUcb.png" alt="enter image description here" /></a></p>
  <p><strong>App.js</strong></p>
  <pre><code>import &quot;./App.css&quot;;
  import Login from &quot;./Components/Login&quot;;
  import Home from &quot;./Components/Home&quot;;
  import ProtectedRoute from &quot;./Components/ProtectedRoute&quot;;
  import { BrowserRouter as Router, Switch, Route, Link } from &quot;react-router-dom&quot;;
  import React, { useState, useEffect } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  function App() {
    const [isAuthenticated, setIsAuthenticated] = useState(false);
  
    useEffect(() =&gt; {
      async function setLoginStatus() {
        try {
          await axios.post(&quot;/checkIfSessionExists&quot;).then((response) =&gt; {
            if (response.status === 200) {
              setIsAuthenticated(true);
              console.log(isAuthenticated)
            } else {
              setIsAuthenticated(false);
            }
          });
        } catch (error) {
          console.log(error)
        }
        
      }
      setLoginStatus();
    }, [isAuthenticated]);
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Router&gt;
          &lt;Switch&gt;
            &lt;Login
              exact
              path=&quot;/&quot;
              component={Login}
              setIsAuthenticated={setIsAuthenticated}
              isAuthenticated={isAuthenticated}
            /&gt;
            &lt;ProtectedRoute
              exact
              path=&quot;/home&quot;
              component={Home}
              isAuthenticated={isAuthenticated}
            /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
   
  </code></pre>
  <p><strong>ProtectedRoute.js</strong></p>
  <pre><code>import { Route, Redirect } from &quot;react-router-dom&quot;;
  import axios from &quot;axios&quot;;
  import { Component, useState } from &quot;react&quot;;
  
  const ProtectedRoute = ({ isAuthenticated, component: Component, ...rest }) =&gt; (
    &lt;Route
      {...rest}
      render={(props) =&gt;
          isAuthenticated === true ? (
          &lt;Component {...props} /&gt;
        ) : (
          &lt;Redirect to=&quot;/&quot; /&gt;
        )
      }
    /&gt;
  
  );
  export default ProtectedRoute;
  </code></pre>