Fixing `useQuery` generic overload error

/**
 * useRoleQuery fetches role name from the api, using cached results if possible to avoid further fetches, since role names are not changeable.
 */
export function useRoleName(roleId: string, { enabled } = DEFAULT_OPTIONS): string | undefined {
  const queryClient = useQueryClient();
  const roleQuery = useQuery({
    queryKey: roleQueryKeys.detail(roleId),
    queryFn: () => Roles.getRole(roleId),
    enabled,
    staleTime: Infinity,
    // Use a role from the roles list query as the initial data, if possible
    placeholderData: () => {
      const queryResults = queryClient.getQueriesData<Successful<RoleListItem[] | null> | undefined>(
        roleQueryKeys.lists()
      );
      const roleListItem = queryResults
        .map((hit) => hit[1]?.data)
        .flat()
        .find((d) => {
          return d?.id === roleId;
        });
      // If we found a match, use it as the initial data for the query
      if (roleListItem) {
        const role = { ...roleListItem, firewallRules: [] };
        return { data: role };
      }
    },
  });

  return roleQuery.data?.data.name;
}

/**
 * useRoleQuery fetches role name from the api, using cached results if possible to avoid further fetches, since role names are not changeable.
 */
export function useRoleName(roleId: string, { enabled } = DEFAULT_OPTIONS): string | undefined {
  const queryClient = useQueryClient();
  const roleQuery = useQuery({
    queryKey: roleQueryKeys.detail(roleId),
    queryFn: () => Roles.getRole(roleId),
    enabled,
    staleTime: Infinity,
    // Use a role from the roles list query as the initial data, if possible
    placeholderData: () => {
      const queryResults = queryClient.getQueriesData<Successful<RoleListItem[] | null> | undefined>(
        roleQueryKeys.lists()
      );
      const roleListItem = queryResults
        .map((hit) => hit[1]?.data)
        .flat()
        .find((d) => {
          return d?.id === roleId;
        });
      // If we found a match, use it as the initial data for the query
      if (roleListItem) {
        const role = { ...roleListItem, firewallRules: [] };
        return { data: role };
      }
    },
  });

  return roleQuery.data?.data.name;
}

src/api/roles-queries.ts:71:5 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ queryKey: readonly [...string[], "detail", string]; queryFn: () => Promise<{ data: Role; metadata?: Metadata | undefined; }>; enabled: boolean; staleTime: number; placeholderData: () => { ...; } | undefined; }' is not assignable to parameter of type 'QueryKey'.
      Object literal may only specify known properties, and 'queryKey' does not exist in type 'readonly unknown[]'.

71     queryKey: roleQueryKeys.detail(roleId),
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/api/roles-queries.ts:71:5 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ queryKey: readonly [...string[], "detail", string]; queryFn: () => Promise<{ data: Role; metadata?: Metadata | undefined; }>; enabled: boolean; staleTime: number; placeholderData: () => { ...; } | undefined; }' is not assignable to parameter of type 'QueryKey'.
      Object literal may only specify known properties, and 'queryKey' does not exist in type 'readonly unknown[]'.

71     queryKey: roleQueryKeys.detail(roleId),
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~