I would like to use the persist function in the middleware 'Zustand' to retain the values after a refresh of the page. When I try the following code, Typescript gives me the error below. I do not know what I'm doing wrong
import { create } from "zustand";
import { persist } from "zustand/middleware";
type CoverImage = {
isOpen: boolean;
onOpen: () => void;
onClose: () => void;
};
export const useCoverImage = create(
persist<CoverImage>(
(set) => ({
isOpen: false,
onClose() {
set({ isOpen: false });
},
onOpen() {
set({ isOpen: true });
},
}),
{ name: "coverImage" }
)
);
No overload matches this call. Overload 1 of 3, '(initializer: StateCreator<CoverImage, [], [never, unknown][]>): UseBoundStore<StoreApi>', gave the following error. Argument of type 'StateCreator<CoverImage, [], [["zustand/persist", CoverImage]]>' is not assignable to parameter of type 'StateCreator<CoverImage, [], [never, unknown][]>'. Type 'StateCreator<CoverImage, [], [["zustand/persist", CoverImage]]>' is not assignable to type '{ $$storeMutators?: [never, unknown][] | undefined; }'. Types of property '$$storeMutators' are incompatible. Type '[["zustand/persist", CoverImage]] | undefined' is not assignable to type '[never, unknown][] | undefined'.