Local storage not updating first time with useState

Why doesn't the local storage change happen on first click?

const Menu = () => {
  const { auth, setAuth } = useContext(AuthContext);

  useEffect(() => {
    localStorage.setItem("theme", auth.theme);
  }, [auth.theme]);

  return (
    <header>
        <ToggleSwitch
          defaultChecked={auth.theme}
          onChange={() => {
            setAuth((prevState) => ({
              ...prevState,
              theme: !prevState.theme,
            }));
          }}
        />
    </header>
  );
};

I have seen the same question asked for setState and the answer seems to be useEffect and ...prevState which I've done.

Edit: It in fact updates from true to false first time but not the other way around.