UseReducer hook changes state but its not triggering re-render

Question

UseReducer hook state change not triggering re-render , but same is working with useState

I wanted hide signup button when user click on it and routed to that page , same to login button.

function NavBar() {
    var displaySignUpLoginButton = new Map();
    displaySignUpLoginButton.set("login",true)
    displaySignUpLoginButton.set("signUp",true)

    function reducer(displaySignUpLoginButton,action){
        console.log(displaySignUpLoginButton)
        displaySignUpLoginButton.set(action.type,false)
        return displaySignUpLoginButton;
    }

    const [buttons, dispatch] = useReducer(reducer,displaySignUpLoginButton);

    return <>
    <nav className="login-page-nav-bar">
        <div className="login-page-logo">
            <div className="login-page-logo">
                <Link to="/">
                    Home
                </Link>
            </div>
        </div>
        {buttons.get("login") ?
        <>
            <div className="login-page-logo">
                <button onClick={() => dispatch({type: "login"})}>
                    Login
                </button>
            </div>
        </> : ""
        }
        {buttons.get("signUp") ?
        <>
            <div className="login-page-logo">
                <button onClick={() => dispatch({type: "signUp"})}>
                    Sign Up
                </button>
            </div>
        </> : ""
        }

    </nav>
       <Outlet />
    </>
}