Troubleshooting 404 Errors When Mounting an `HttpApi` App on an Existing Router

// building the API app
const MyApiLive = HttpApiBuilder.api(MyApi).pipe(Layer.provide(MyApiGroupLive));

const myApiApp = HttpApiBuilder.httpApp.pipe(
  Effect.provide(HttpApiBuilder.Router.Live),
  Effect.provide(MyApiLive)
);

// building the router 
const router = Effect.gen(function* () {
  const apiApp = yield* publicApiApp;

  return pipe(
    HttpRouter.empty,
    HttpRouter.get(
      '/healthz',
      pipe(
        HttpServerResponse.empty({ status: 200 }),
        HttpMiddleware.withLoggerDisabled
      )
    ),
    HttpRouter.mountApp('/api', apiApp) // <- mounting the API here
  );
});

// http layer
export const HttpLive = pipe(
  router,
  Effect.map(HttpServer.serve()),
  Layer.unwrapEffect,
  Layer.provide(NodeHttpServer.layer(createServer, { port: 3000 }))
);