Issue with Layers and Dependency

interface ServiceA {
    get: () => string;
}

interface ServiceB {
    get: () => string;
}

const ServiceA = Context.Tag<ServiceA>();
const ServiceB = Context.Tag<ServiceB>();

const ServiceALive = Layer.succeed(ServiceA, ServiceA.of({ get: () => 'A' }));
const ServiceBLive = Layer.effect(
    ServiceB,
    Effect.gen(function* (_) {
        const a = yield* _(ServiceA);
        return ServiceB.of({ get: () => a.get() + 'B' });
    })
);

// Layer.Layer<ServiceA, never, ServiceA>
const mainLayer = ServiceBLive.pipe(Layer.provide(ServiceALive));
//        ^------ Still requires ServiceA

interface ServiceA {
    get: () => string;
}

interface ServiceB {
    get: () => string;
}

const ServiceA = Context.Tag<ServiceA>();
const ServiceB = Context.Tag<ServiceB>();

const ServiceALive = Layer.succeed(ServiceA, ServiceA.of({ get: () => 'A' }));
const ServiceBLive = Layer.effect(
    ServiceB,
    Effect.gen(function* (_) {
        const a = yield* _(ServiceA);
        return ServiceB.of({ get: () => a.get() + 'B' });
    })
);

// Layer.Layer<ServiceA, never, ServiceA>
const mainLayer = ServiceBLive.pipe(Layer.provide(ServiceALive));
//        ^------ Still requires ServiceA