anyone uses nextauth and trying to store user state with zustand after signIn before ?

I've had something like this on the auth-options.ts

...
    async signIn({ user, account }: { user: AuthUser; account: Account }) {
      if (account?.provider === "credentials") {
        // ...OTP & Magic Link custom logic
        return true;
      }
      if (account?.provider === "google" || account?.provider === "github") {
        const { handleSignIn } = useUserStore.getState();
        return await handleSignIn(account.access_token!, user, account);
      }
    },

where in handleSignIn we fetch the user info from the DB and get the metadata + store it to userStore something like this.

...
import { User } from "@/types";
import { create } from "zustand";
import { persist, createJSONStorage, PersistStorage } from "zustand/middleware";
...

interface UserState {
  user: User | null;
  getUserInfo: () => User | null;
  setUser: (user: User | null) => void;
  clearUser: () => void;
  handleSignIn: (
    accessToken: string,
    user: AuthUser,
    account: Account
  ) => Promise<boolean>;
}

const USER_STORAGE_KEY = "user-storage-uwuw";

// Only create storage on the client side
let storage: PersistStorage<UserState> | undefined;
if (typeof window !== "undefined") {
  storage = createJSONStorage(() => sessionStorage);
}

export const useUserStore = create<UserState>()(
  persist(
    (set, get) => ({
      user: null,
      getUserInfo: () => get().user,
      setUser: (user: User | null) => set({ user }),
      clearUser: () => {
        set({ user: null });
        sessionStorage.removeItem(USER_STORAGE_KEY);
      },
      handleSignIn: async (
        accessToken: string,
        user: AuthUser,
        account: Account
      ) => {
        try {
          const { data } = await getUserByEmail(accessToken, user.email!);

          if (!data) {
            console.log("User not found, creating user...", user);
            const newUser: UserOrganization = await createUser(accessToken, {
              user: {
                user_name: user.name!,
                user_email: user.email!,
                access_token: accessToken,
                refresh_token: account.refresh_token!,
                session_token: account.id_token!,
              },
              organization: {
                organization_name: `${user.name!}'s projects`.toLowerCase(),
              },
            });
            set({ user: newUser.user });
          } else {
            // ... update logic ... 
            set({ user: data });
          }
          return true;
        } catch (err) {
          console.error("Error during sign-in process:", err);
          return false;
        }
      },
    }),
    {
      name: USER_STORAGE_KEY,
      storage: storage,
    }
  )
);

but it seems like i couldnt set the zustand state as I got this error: [zustand persist middleware] Unable to update item 'user-storage-uwuw', the given storage is currently unavailable.

Anyone knows what's up with this ?

p/s: The reason why im using zustand persist initially was due to the fact it doesnt store the user data properly to the state.