Аут охраняемый маршрут в Иони c 4

Question

Здравствуйте, у меня есть React + Firebase + Ionic4. Он должен отображать маршрут /login, если не прошедший проверку пользователь пытается получить доступ к /account, используя ссылку вкладки ioni c. Мой код работает только при первом переходе на /account. Как только я переключаюсь между другими вкладками, это позволяет мне ввести /account. Спасибо.

Root компонент App.tsx

<IonApp>
    <IonReactRouter>
    <IonTabs>
        <IonRouterOutlet>
          <Route component={Account} path={ACCOUNT} exact={true} />
          <Route path={SIGN_IN} component={SignIn} exact={true} />
          <Route path={EVENTS} component={Events} exact={true} />
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="events" href={EVENTS}>
            <IonIcon icon={dateRangeIcon} />
            <IonLabel>Events</IonLabel>
          </IonTabButton>
          <IonTabButton tab="account" href={ACCOUNT}>
            <IonIcon icon={accountBoxIcon} />
            <IonLabel>My account</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>

Здесь я проверяю Account.tsx, если пользователь аутентифицирован

useEffect(() => {
    console.log('Auth user object in Account useEffect', auth.user)
    const { db } = props.firebase
    if (auth.user) {
      const unsubscribe = db
        .collection('events')
        .get()
        .then((querySnapshot: any) => {
          const events: any = []
          querySnapshot.docs.forEach((doc: any) => {
            const data = doc.data()
            data.docId = doc.id
            console.log('firebase data', data)
            events.push(data)
          })
          setDataFetched(true)
        })
        .catch((error: any) => {
          return console.log('Error with fetching events', error)
        })
      return () => unsubscribe()
    } else {
      return props.history.push('/login')
    }
  }, [])

Auth hook useAuth.tsx

const AuthContext = React.createContext(null)

export function AuthProvider({ children }: any) {
  const auth = useProvideAuth()

  return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>
}

const useAuth = () => useContext(AuthContext)

function useProvideAuth() {
  const [user, setUser] = useState(null)

  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        setUser(user)
      } else {
        setUser(false)
      }
    })

    return () => unsubscribe()
  }, [])

  return {
    user,
    loginWithFacebook,
    loginWithGoogle,
    signout,
  }
}
export default useAuth