Trouble Creating a Layer with Scope Requirement in Effect Typescript

import { Context, Effect, Layer, type Scope } from "effect";

export class ApiUtils extends Context.Tag("ApiUtils")<
  ApiUtils,
  {
    readonly addUnloadProtection: Effect.Effect<void, never, Scope.Scope>;
  }
>() {}

export const ApiUtilsLive = Layer.effect(
  ApiUtils,
  Effect.gen(function* () {
    return {
      addUnloadProtection: Effect.gen(function* () {
        let unloadHandler: ((e: BeforeUnloadEvent) => void) | null = null;

        unloadHandler = (e: BeforeUnloadEvent) => {
          e.preventDefault();
        };

        yield* Effect.sync(() => {
          if (unloadHandler) {
            window.addEventListener("beforeunload", unloadHandler);
          }
        });

        yield* Effect.addFinalizer(() =>
          Effect.sync(() => {
            if (unloadHandler) {
              window.removeEventListener("beforeunload", unloadHandler);
              unloadHandler = null;
            }
          }),
        );
      }),
    };
  }),
);