useEffect does not run when the dependencies are changed - reactjs

Question

I am using React Redux for state management. I have an anonymous user and an admin. I have current user which is empty {} and I am changing it to store the user details when the admin logs in. So, in my application I want to show the admin navbar if there is a logged user and I would like to show the anonymous navbar when there is not. Currently, when the admin logs in, the navbar is changed, but when I click logout, navbar is not changed. How can I solve this issue?
This is my NavBar.js:
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import NavBarAdmin from "./NavBarAdmin";
import NavBarAnonymous from "./NavBarAnonymous";
function NavBar() {
const currentUser = useSelector((state) => state.currentUser);
const [currentView, setCurrentView] = useState('anonymous');
useEffect(() => {
console.log(currentUser);
if(currentUser==null || currentUser.length==0 || currentUser == undefined){
setCurrentView('anonymous');
}else{
setCurrentView('admin');
}
}, [currentUser])
const handleView = () => {
switch(currentView){
case "anonymous": return <>
<NavBarAnonymous/>
</>
case "admin":
return <>
<NavBarAdmin/>
</>
}
}
return(
<>
{handleView()}
</>
)
}
export default NavBar;
My actions.js looks like:
import actionTypes from "./actionTypes";
export function setCurrentUser(value) {
return{
type: actionTypes.SET_CURRENT_USER,
payload: value
}
}
actionTypes.js
const actionTypes = {
SET_CURRENT_USER: 'SET_CURRENT_USER',
}
export default actionTypes;
configureStore.js
import { applyMiddleware, compose, createStore } from "redux";
import thunkMiddleware from "redux-thunk";
import rootReducer from './reducers';
export default function configureStore(preloadedState) {
const middlewares = [thunkMiddleware];
const middlewareEnhancer = applyMiddleware(...middlewares);
const enhancers = [middlewareEnhancer];
const composedEnhancers = compose(...enhancers);
const store = createStore(rootReducer, preloadedState, composedEnhancers);
return store;
}
reducers.js:
import { combineReducers } from "#reduxjs/toolkit";
import actionTypes from "./actionTypes";
export function currentUser(state = {}, action) {
switch (action.type) {
case actionTypes.SET_CURRENT_USER:
return Object.assign({}, state, {
q: action.payload,
})
default:
return state
}
}
export default combineReducers({
currentUser
});
In the logout functionality I am using:
dispatch(setCurrentUser({}));
And when I click logout button, {} is printed in the console, which means that the current user is set to {}, but the NavBar is not re-rendered.