Troubleshooting Layer Ignoring Custom Config Provider in TypeScript

export class EnvStore extends Context.Tag("EnvStore")<
  EnvStore,
  E.Effect.Success<typeof makeService>
>() {
  static readonly Live = Layer.effect(this, makeService);
}

export const makeService = E.gen(function* ($) {
  const [apiBasePath, brand, sessionCacheKey, defaultResourceId] = yield* $(
    Config.all([
      Config.string("VITE_API_BASE_PATH"),
      Config.string("VITE_THEME"),
      Config.string("VITE_SESSION_CACHE_KEY"),
      Config.integer("VITE_DEFAULT_SCHEMA"),
    ]),
  );

  const decodeConfig = S.decodeUnknown(Env);
  return yield* $(decodeConfig({ apiBasePath, brand, sessionCacheKey, defaultResourceId }));
}).pipe(E.orDie);

// custom runtime
const AppConfigProvider = Layer.setConfigProvider(ConfigProvider.fromJson(import.meta.env));
const CommonLayer = Layer.mergeAll(EnvStore.Live, StorageService.Live, TokenCache.Live);
const AppLayer = Layer.merge(CommonLayer, AppConfigProvider);

export const AppRuntime = ManagedRuntime.make(AppLayer);