Error when using global store with Typescript

I am trying to have a global store that can be retrieve inside lens for my store.

"@dhmk/zustand-lens": "^4.0.0",
"zustand": "^4.5.2"

Here's my code.

interface Store {
  auth: AuthSlice;
  sidebar: SidebarSlice;
  loading: boolean;
}

export const useStore = create<Store>()(
  devtools(
    withLenses(() => ({
      auth: lens<AuthSlice>(createAuthSlice),
      sidebar: lens<SidebarSlice>(createSidebarSlice),
      loading: false,
    })),
  )
);

So that in my slices, I can access the store by:

(set, get, store) => ({
  // ...
  store.setState({ loading: false });
})

There's no error popping up in my IDE, but get this error when starting react.

ERROR in src/stores/store.ts:15:16
TS2345: Argument of type '() => { auth: LensOpaqueType<AuthSlice, unknown>; sidebar: LensOpaqueType<SidebarSlice, unknown>; loading: boolean; }' is not assignable to parameter of type 'CheckLenses<{ auth: AuthSlice & LensTypeInfo<AuthSlice, StoreApi<unknown>>; sidebar: SidebarSlice & LensTypeInfo<SidebarSlice, StoreApi<...>>; loading: boolean; } & LensMeta<...>, WithDevtools<...>> | StateCreator<...>'.
  Type '() => { auth: LensOpaqueType<AuthSlice, unknown>; sidebar: LensOpaqueType<SidebarSlice, unknown>; loading: boolean; }' is not assignable to type 'StateCreator<{ auth: AuthSlice & LensTypeInfo<AuthSlice, StoreApi<unknown>>; sidebar: SidebarSlice & LensTypeInfo<SidebarSlice, StoreApi<...>>; loading: boolean; }, [...], [], CheckLenses<...>>'.
    Type '() => { auth: LensOpaqueType<AuthSlice, unknown>; sidebar: LensOpaqueType<SidebarSlice, unknown>; loading: boolean; }' is not assignable to type '(setState: <A extends string | { type: string; }>(partial: { auth: AuthSlice & LensTypeInfo<AuthSlice, StoreApi<unknown>>; sidebar: SidebarSlice & LensTypeInfo<...>; loading: boolean; } | Partial<...> | ((state: { ...; }) => { ...; } | Partial<...>), replace?: boolean, action?: A) => void, getState: () => { ...; }, ...'.
      Type '{ auth: LensOpaqueType<AuthSlice, unknown>; sidebar: LensOpaqueType<SidebarSlice, unknown>; loading: boolean; }' is not assignable to type 'CheckLenses<{ auth: AuthSlice & LensTypeInfo<AuthSlice, StoreApi<unknown>>; sidebar: SidebarSlice & LensTypeInfo<SidebarSlice, StoreApi<...>>; loading: boolean; } & LensMeta<...>, WithDevtools<...>>'.
        Property 'loading' is incompatible with index signature.
          Type 'boolean' has no properties in common with type 'LensTypeInfo<unknown, StoreApi<unknown>>'.
    13 | export const useStore = create<Store>()(
    14 |   devtools(
  > 15 |     withLenses(() => ({
       |                ^^^^^^^^
  > 16 |       auth: lens<AuthSlice>(createAuthSlice),
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 17 |       sidebar: lens<SidebarSlice>(createSidebarSlice),
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 18 |       loading: false,
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 19 |     })),
       | ^^^^^^^
    20 |   )
    21 | );
    22 |

dhmk083 / dhmk-zustand-lens

Error when using global store with Typescript #23