TypeScript Error with Zustand's Persist Middleware and StateCreator in React App

Question

I'm trying to use Zustand's persist middleware to store and retrieve state in my React application. However, I'm encountering a TypeScript error that I'm struggling to resolve. The error message is as follows:

Argument of type 'StateCreator<ForestStore, [], [["zustand/persist", ForestStore]]>' is not assignable to parameter of type 'StateCreator<ForestStore, [], []>'.
Type 'StateCreator<ForestStore, [], [["zustand/persist", ForestStore]]>' is not assignable to type '{ $$storeMutators?: [] | undefined; }'.
Types of property '$$storeMutators' are incompatible.
Type '[["zustand/persist", ForestStore]] | undefined' is not assignable to type '[] | undefined'.
Type '[["zustand/persist", ForestStore]]' is not assignable to type '[]'.
Source has 1 element(s) but target allows only 0.ts(2345)

Here is my code:

import {create} from 'zustand';
import { persist, createJSONStorage} from 'zustand/middleware';

export type Forest = "poetry" | "prose" | "script";
export interface ForestStore {
  forest: Forest;
  setForest: (forest: Forest) => void;
}

const forestPersist = persist<ForestStore>(
    (set) => ({
        forest: "poetry",
        setForest: (newForest) => set(() => ({forest: newForest})),
    }),
    {
        name: "forest-storage",
        storage: createJSONStorage(() => sessionStorage),
    }
);



export const useForestStore = create<ForestStore>(forestPersist);

I really don't know how to solve it the code works as intended but the types are messing around.

Thanks you very much in advance

Answer 1

Like Muhammad Nouman Rafique said:

Add () after create like this: const useForestStore = create()(forestPersist). This will fix the type issue