useState working in SSR but undefined in browser

const useUserState = () => useState('user');

export const useUser = () => {
    const jwt = useCookie('jwt');
    const user = useUserState();

    const login = async (body: any) => {
        const data = await usePayloadFetch('users/login', { method: 'POST', body });
        jwt.value = data.token;
        navigateTo('/');
    };

    const logout = async () => {
        jwt.value = undefined;
        user.value = undefined;
    };

    const getUser = async () => {
        if (user.value) return user;

        const data = await usePayloadFetch('users/me');
        user.value = data;

        return user;
    };

    return { token: jwt, getUser, login, logout };
};