Action only happens after second button press

I have a button called signOut which changes a context value and signs a user out of my web app, however it seems to be only performing these changes after I click the button for a second time.

Initially, I thought it was because the process was async and so the header component was being rendered before the context has changed, however (and I know its dodgy) to check this I added a setTimeout and only navigated to the home page after 2 seconds which still didn’t fix it.

    const signOut = () => {
        setUserDetails({"displayName":""})
        auth.signOut().then(() => {
            console.log(userDetails)
            navigate("/")
        })
    }

Here is the code I call onClick

Here is the code for the header (which should rerender after userDetails is updated)

    useEffect(() => {
        console.log(userDetails.displayName)
        if (userDetails.displayName !== "") {
            setLoginUser(userDetails.displayName)
            setLoginUserPath("/settings")
        } else {
            setLoginUser("Log in")
            setLoginUserPath("/login")            
        }
    }, [userDetails.displayName])

here is the context:

  const userDetails = createContext({
    userDetails: {"displayName":""},
    setUserDetails: (input) => {}
  });

This is what happens when I click the sign out button the first time
enter image description here

This is what happens the second time I click the same button (note header.js now returns an empty string rather than “Toby”)
enter image description here

Apologies if this is a duplicate question, I haven’t been able to find anything too similar (although I feel as though its going to have a really simple answer that Ive massively overlooked).