title: hook.useHook is not a function while implementing a new endpoint NextJS
body: <p>I am running into the error <code>TypeError: hook.useHook is not a function</code> bellow.</p>
  <p>I a desperate move I have placed many types as <code>any</code> but as you you guessed, this did not solved it.</p>
  <p><a href="https://i.stack.imgur.com/bUbO2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bUbO2.png" alt="error" /></a></p>
  <p>Here is my <code>use-subscription.tsx</code> file</p>
  <pre><code>import ...
  
  export type UseSubscribe&lt;
      H extends MutationHook&lt;any&gt; = MutationHook&lt;any&gt;
      &gt; = ReturnType&lt;H['useHook']&gt;
  
  export const fetcher: HookFetcherFn&lt;any&gt; = mutationFetcher
  
  const fn = (provider: Provider) =&gt; provider.subscriptions?.useSubscriptions!
  
  const useSubscribe: any = (...args: any) =&gt; {
      const hook = useHook(fn)
      return useMutationHook({ fetcher, ...hook })(...args)
  }
  
  export default useSubscribe
  
  </code></pre>
  <p>I am not sure what the problem is, I even don't know what to look for if it's not about types, which I tried to change to <code>any</code>.</p>
  <p>And here is the <code>use-hook.ts</code></p>
  <pre><code>export function useFetcher() {
    const { providerRef, fetcherRef } = useCommerce()
    return providerRef.current.fetcher ?? fetcherRef.current
  }
  
  export function useHook&lt;
    P extends Provider,
    H extends MutationHook&lt;any&gt; | SWRHook&lt;any&gt;
  &gt;(fn: (provider: P) =&gt; H) {
    const { providerRef } = useCommerce&lt;P&gt;()
    const provider = providerRef.current
    return fn(provider)
  }
  
  export function useSWRHook&lt;H extends SWRHook&lt;any&gt;&gt;(
    hook: PickRequired&lt;H, 'fetcher'&gt;
  ) {
    const fetcher = useFetcher()
  
    return hook.useHook({
      useData(ctx) {
        const response = useData(hook, ctx?.input ?? [], fetcher, ctx?.swrOptions)
        return response
      },
    })
  }
  
  export function useMutationHook&lt;H extends MutationHook&lt;any&gt;&gt;(
    hook: PickRequired&lt;H, 'fetcher'&gt;
  ) {
    const fetcher = useFetcher()
  
    return hook.useHook({
      fetch: useCallback(
        ({ input } = {}) =&gt; {
          return hook.fetcher({
            input,
            options: hook.fetchOptions,
            fetch: fetcher,
          })
        },
        [fetcher, hook.fetchOptions]
      ),
    })
  }
  </code></pre>
  <p>If someone is interested in this issue, you can find more in <a href="https://github.com/vercel/commerce" rel="nofollow noreferrer">https://github.com/vercel/commerce</a> which I used as a based repo to create mine.</p>