how to use zustand with immer ?

import create from 'zustand';
import { produce } from 'immer';

interface AuthState {
  user?: {
    id: number;
    address: string;
    name?: string;
    email?: string;
    avatar?: string;
    token?: string;
    roles?: string[];
  };

  updateAuth: (data: AuthState) => void;
  resetAuth: () => void;
}

export const useUser = create<AuthState>((set, get) => ({
  updateAuth: (data: AuthState) => {
    set(
      produce((draft: AuthState) => {
        draft.user = data.user;
      })
    );
  },
  resetAuth: async () => {
    set(
      produce((draft: AuthState) => {
        draft.user = undefined;
      })
    );
  },
}));

export default useUser;

how to use zustand with immer ?

import create from 'zustand';
import { produce } from 'immer';

interface AuthState {
  user?: {
    id: number;
    address: string;
    name?: string;
    email?: string;
    avatar?: string;
    token?: string;
    roles?: string[];
  };

  updateAuth: (data: AuthState) => void;
  resetAuth: () => void;
}

export const useUser = create<AuthState>((set, get) => ({
  updateAuth: (data: AuthState) => {
    set(
      produce((draft: AuthState) => {
        draft.user = data.user;
      })
    );
  },
  resetAuth: async () => {
    set(
      produce((draft: AuthState) => {
        draft.user = undefined;
      })
    );
  },
}));

export default useUser;