Context App Provider with zustand in Typescript

app-context.ts

import { createContext, useContext } from 'react'

import { createStore, StoreApi } from 'zustand'
import { immer } from 'zustand/middleware/immer'
import { useStoreWithEqualityFn } from 'zustand/traditional'

type State = {
  total: number
  increase: () => void
  decrease: () => void
}
const store = createStore<State>()(
  immer((set) => ({
    total: 0,
    increase: () =>
      set((state) => {
        state.total++
      }),
    decrease: () =>
      set((state) => {
        state.total--
      })
  }))
)

const Context = createContext<StoreApi<State>>({} as StoreApi<State>)

export const AppProvider = ({ children }: { children: React.ReactNode }) => {
  return <Context.Provider value={store}>{children}</Context.Provider>
}

export const useApp = <T,>(selector: (state: State) => T, equalityFn?: (left: T, right: T) => boolean) => {
  const store = useContext(Context)

  if (!store) {
    throw new Error('Context is not provided')
  }

  return useStoreWithEqualityFn(store, selector, equalityFn)
}