Conditional react-router-dom rendering reload to index

Question

Currently, I'm using Firebase Authentication and Firebase Firestore as backend. The problem is whenever I reload from a different route, for example, /profile, it always routes back to the the index '/' route.

Here is the code for the Route in my App.js

function App() {
  const { authIsReady, vendor } = useAuthContext()
  return (
    <>
      {authIsReady && (
         <Router>
           {vendor && <Sidebar />}
            
            <Switch>
              <Route exact path="/"> 
                {!vendor && <Redirect to="/login" />}
                {vendor && <Home />}
              </Route>

              <Route exact path='/login'>
                {vendor && <Redirect to="/" />}
                {!vendor && <Login />}
              </Route>

              <Route exact path="/profile"> 
                {!vendor && <Redirect to="/login" />}
                {vendor && < Profile vendor={vendor}/>}
              </Route>

              <Route exact path="/newproduct"> 
                {!vendor && <Redirect to="/login" />}
                {vendor && < NewProduct vendor={vendor}/>}
              </Route>
              
            </Switch>
          </Router>
      )}
    </>
  );
}

Here is the AuthContext.

import { createContext, useEffect, useReducer} from 'react'
import { projectAuth, projectFirestore } from '../firebase'

export const AuthContext = createContext()

export const authReducer = (state, action) => {
    switch (action.type) {
        case 'LOGIN':
            return { ...state, auth: action.payload }
        case 'LOGOUT':
            return { ...state, auth: null, vendor: null }
        case 'AUTH_IS_READY':
            return { ...state, auth: action.payload, authIsReady: true}
        case 'RETRIVED_VENDOR':
            return { ...state, vendor: action.payload }
        default:
            return state
    }
}

export const AuthContextProvider = ({ children }) => {
    const [state, dispatch] = useReducer(authReducer, {
        auth: null,
        vendor: null,
        authIsReady: false
    })

    useEffect(() => {
        const unsub = projectAuth.onAuthStateChanged((auth) => {
            dispatch({ type: 'AUTH_IS_READY', payload: auth})
            unsub()
        })
    }, [])
  
    useEffect(() => {
        try {
            if (state.authIsReady && state.auth) {
                if (state.auth.uid != null) {
                    projectFirestore.collection('Vendors').doc(state.auth.uid).get()
                    .then(snapshot => {
                    dispatch({ type: 'RETRIVED_VENDOR', payload: snapshot.data()})
                    })
                } else {
                    projectFirestore.collection('Vendors').doc(state.auth.user.uid).get()
                    .then(snapshot => {
                    dispatch({ type: 'RETRIVED_VENDOR', payload: snapshot.data()})
                    })
                }
            }
        } catch (e) {
            console.log(e)
        }
        
    }, [state.authIsReady, state.auth])

    return (
        <AuthContext.Provider value={{ ...state, dispatch }}>
            {children}
        </AuthContext.Provider>
    )
}

Could this be due to the fact that when I reload, the Vendor is not kept and goes back to the index page where I then get the vendor again and re-renders it?