Custom use fetch type error

Vue: No overload matches this call.
Overload 1 of 2,
(request: NitroFetchRequest | Ref<NitroFetchRequest, NitroFetchRequest> | (() => NitroFetchRequest), opts?: UseFetchOptions<...> | undefined): AsyncData<...>
, gave the following error.
Overload 2 of 2,
(request: NitroFetchRequest | Ref<NitroFetchRequest, NitroFetchRequest> | (() => NitroFetchRequest), opts?: UseFetchOptions<...> | undefined): AsyncData<...>
, gave the following error.

import type { UseFetchOptions } from 'nuxt/app'
import type {ProblemDetails} from "~/types";
import {FetchError} from "ofetch";

export function useAPI<T>(
    url: string | (() => string),
    options?: UseFetchOptions<T>,
) {
  return useFetch<T, FetchError<ProblemDetails>>(url, {
    ...options,
    $fetch: useNuxtApp().$api 
  })
}