Custom Fetch Implementation Fails in HttpClient Setup

export const client = (f: any) => {
    return HttpResolver.make<AppRouter>(
        HttpClient.fetchOk.pipe(
            HttpClient.mapRequest(HttpClientRequest.prependUrl('/api/rpc')),
            HttpClient.transform((effect) => effect.pipe(Effect.provideService(HttpClient.Fetch, f)))
        )
    ).pipe(Resolver.toClient);
};

export const client = (f: any) => {
    return HttpResolver.make<AppRouter>(
        HttpClient.fetchOk.pipe(
            HttpClient.mapRequest(HttpClientRequest.prependUrl('/api/rpc')),
            HttpClient.transform((effect) => effect.pipe(Effect.provideService(HttpClient.Fetch, f)))
        )
    ).pipe(Resolver.toClient);
};