I was watching a tutorial and I got stuck on this part wherein I keep on redirecting to '/chat'. I set the user to null but I keep on redirecting to '/chats'. I tried to re-watch the vid, but I keep getting stuck on this part.

AuthContext.js

import React, { useContext, useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { auth } from '../firebase'

const AuthContext = React.createContext()

export const useAuth = () => useContext(AuthContext)

export const AuthProvider = ({ children }) => {
  const [loading, setLoading] = useState(true)
  const [user, setUser] = useState(null)
  const history = useHistory()

  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      setUser(user)
      setLoading(false)
      if (user) {
        history.push('/chats')
      }
    })
  }, [user, history])

  const value = { user }
  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  )
}

App.js

import 'firebase/app'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Chats from './components/Chats'
import Login from './components/Login'
import { AuthProvider } from './context/AuthContext'

function App() {
  return (
    <>
      <Router>
        <AuthProvider>
          <Switch>
            <Route path="/chats">
              <Chats />
            </Route>
            <Route path="/">
              <Login />
            </Route>
          </Switch>
        </AuthProvider>
      </Router>
    </>
  )
}

export default App