How to keep authenticated state on refresh?

I'm using firebase authentication for my app. I used useAuth hook from here. Integrate with react-router guide about redirect (Auth).

SignIn,SignOut function is working as expected. But when I try to refresh the page. It redirects to /login again.

My expected: Redirect to / route when authenticated.

I tried to add this code in PrivateRoute.js

  if (auth.loading) {
    return <div>authenticating...</div>;
  }

So I can refresh the page without redirect to /login but it only show authenticating... when click the log out button.

Here is my code: https://codesandbox.io/s/frosty-jennings-j1m1f?file=/src/PrivateRoute.js

What I missed? Thanks!

Read more here: https://stackoverflow.com/questions/66273155/how-to-keep-authenticated-state-on-refresh