Service not propagating Page dependency as expected in Effect Typescript library

export class Test extends Effect.Service<Test>()('Test', {
    effect: Effect.gen(function* () {
        return {
            // (property) test: () => Effect.Effect<string, PlaywrightError, Page>
            test: () =>
                Page.with(async (p) => {
                    return await p.page.goto('https://www.google.com').then(() => {
                        return 'success'
                    })
                }),
        }
    }),
}) {
    // Layer.Layer<Test, never, never>
    static readonly Live = this.Default
}

export class Test extends Effect.Service<Test>()('Test', {
    effect: Effect.gen(function* () {
        return {
            // (property) test: () => Effect.Effect<string, PlaywrightError, Page>
            test: () =>
                Page.with(async (p) => {
                    return await p.page.goto('https://www.google.com').then(() => {
                        return 'success'
                    })
                }),
        }
    }),
}) {
    // Layer.Layer<Test, never, never>
    static readonly Live = this.Default
}