Type Error When Adding Additional Services to HttpClient Context

export class AuthToken extends Context.Tag('AuthToken')<
  AuthToken,
  string
>() {}

const apiClient = HttpApiClient.make(apiSpec, {
  transformClient: HttpClient.mapRequestEffect(
    request =>
      Effect.gen(function*() {
        const authToken = yield* AuthToken
        /* this works
        const authToken = Option.getOrThrow(
          yield* Effect.serviceOption(AuthToken),
        )
        */
        return HttpClientRequest.setHeader('authorization', authToken)(
          request,
        )
      }),
  ),
})

Type '<E, R>(self: HttpClient<E, R>) => HttpClient<E, AuthToken | R>' is not assignable to type '(client: HttpClient<HttpClientError, Scope>) => HttpClient<HttpClientError, Scope>'. ​typescript(2322)
  Type 'HttpClient<HttpClientError, Scope | AuthToken>' is not assignable to type 'HttpClient<HttpClientError, Scope>'.
    Type 'Scope | AuthToken' is not assignable to type 'Scope'.
      Type 'AuthToken' is missing the following properties from type 'Scope': strategy, [ScopeTypeId], pipe