I'm trying to use both immer and devtools middleware at the same time. I encapsulated immer inside devtools, like it is described here, but I'm running into an error:

Cannot assign an argument of type "StateCreator, unknown][]], { activities: {}; currentActivityId: undefined; addActivity: (activity: Activity) => void; removeActivity: (activityId: string) => void; setColor: (color: string) => void; }>" to parameter of type "StateCreator

(full trace below)

I would like to know why this happens and how it can be solved.

import { create } from "zustand";
import { devtools } from "zustand/middleware";
import { immer } from "zustand/middleware/immer"

type ActivityId = string;

type Activity = {
    name: string,
    sessionDuration: number,
    color: string,
    emoji: string,
    transitions: Record
}


interface ActivitiesStore {
  activities: Record;
  currentActivityId?: ActivityId;
  addActivity: (activity: Activity) => void;
  removeActivity: (activityId: ActivityId) => void;
  setColor: (color: string) => void;
}

export const useActivitiesStore = create()(
    devtools(
        immer((set) => ({
            activities: {},
            currentActivityId: undefined,

            addActivity: (activity) => {
                const id = crypto.randomUUID?.() ?? Date.now().toString();
                set((state) => {
                state.activities[id] = activity;
                });
            },

            removeActivity: (activityId) => {
                set((state) => {
                delete state.activities[activityId];
                if (state.currentActivityId === activityId) {
                    state.currentActivityId = undefined;
                }
                });
            },

            setColor: (color) => {
                set((state) => {
                const { currentActivityId, activities } = state;
                if (currentActivityId && activities[currentActivityId]) {
                    activities[currentActivityId].color = color;
                }
                });
            },
            })
        ),
    )
)

and here's the error message:

Cannot assign an argument of type "StateCreator, unknown][]], { activities: {}; currentActivityId: undefined; addActivity: (activity: Activity) => void; removeActivity: (activityId: string) => void; setColor: (color: string) => void; }>" to parameter of type "StateCreator".

  Type 'StateCreator, unknown][]], { activities: {}; currentActivityId: undefined; addActivity: (activity: Activity) => void; removeActivity: (activityId: string) => void; setColor: (color: string) => void; }>' is not assignable to type '{ $$storeMutators?: ["zustand/immer", unknown][] | undefined; }'.
    The types of property '$$storeMutators' are incompatible.
      Type '[["zustand/devtools", never], ...[keyof StoreMutators, unknown][]] | undefined' is not assignable to type '["zustand/immer", unknown][] | undefined'.
        Type '[["zustand/devtools", never], ...[keyof StoreMutators, unknown][]]' is not assignable to type '["zustand/immer", unknown][]'.
          Type '["zustand/devtools", never] | [keyof StoreMutators, unknown]' is not assignable to type '["zustand/immer", unknown]'.
            Type '["zustand/devtools", never]' is not assignable to type '["zustand/immer", unknown]'.
              The type at position 0 of the source is not compatible with the type at position 0 of the target.
                Type '"zustand/devtools"' is not assignable to type '"zustand/immer"'.

These are the software versions i'm using:

• immer@11.1.11

• zustand@5.0.14

• typescript@6.0.3