Hi all, i'm trying to get persist my shopping cart state. What would be the best way of doing this? Persisting my Zustand state or saving to the database?

I'm using Zustand as my state management and i've seen there is the zustand middleware where you can store the state into local storage. I attempted to implement what was in the Zustand docs using the Persist functionality but then i'm getting errors on my
const { cart } = useCartStore() where it's saying it expects 1 argument but gets 0...i dont know what argument its expecting and I cant find it in the docs.

this was the current implementation using persist.

import { create } from 'zustand';
import {persist} from 'zustand/middleware'
import { MenuItem } from '@/lib/types';

interface ShoppingCartState {
  cart: MenuItem[];
  addItem: (item: MenuItem) => void;
  removeItem: (itemId: string) => void;
  clearCart: () => void;
}

const initialState: ShoppingCartState = {
  cart: [],
  addItem: (item) => {},
  removeItem: (itemId) => {},
  clearCart: () => {},
};

export const useCartStore = create<ShoppingCartState>()
persist(
    (set) => ({
        ...initialState,

        addItem: (item: MenuItem) => {
          set((state: ShoppingCartState) => ({ cart: [...state.cart, item] }));
        },
      
        removeItem: (itemId: string) => {
          set((state: ShoppingCartState) => ({
            cart: state.cart.filter((item) => item.id !== itemId),
          }));
        },
      
        clearCart: () => {
          set(() => ({ cart: [] }));
        },
    }),
    {
      name: 'cart-storage',
    },
  )

can someone tell me what i'm doing wrong here? Or what is the argument its expecting?

error is

Expected 1 arguments, but got 0.ts(2554)
react.d.mts(27, 67): An argument for 'initializer' was not provided.
(alias) useCartStore<[]>(initializer: StateCreator<ShoppingCartState, [], []>): UseBoundStore<StoreApi<ShoppingCartState>>
import useCartStore