How to keep Docker name resolution when HTML from NGINX try to consume WebAPI service in Docker Compose?

I'm orchestrating the staging environment through docker-compose, and expect to use the services name to address internal requests (Docker DNS).

The system consists of:

• A MSSQL (internal access only)
• A RabbitMQ (external access just for management in port 15672)
• Some Worker Services (AMQP) (internal access only)
• A WebAPI BFF (HTTP) (internal access only)
• A WASM WebAPP (HTML) in NGINX as Web Server (external access only)

To handle this two networks were defined in docker-compose:

networks:
  internal:
    name: internal
    driver: bridge
  external:
    name: external
    external: true

For MSSQL, RabbitMQ, Worker Services, and WebAPI only the internal network was defined. For WebAPP, both networks were defined:

version: "3.9"
services:

  mssql:
    container_name: mssql
    image: mcr.microsoft.com/mssql/server
    ports:
      - "1433" #internal access only
    networks:
      - internal

  rabbitmq:
    container_name: rabbitmq
    image: rabbitmq:3-management
    ports:
      - "5672" #internal access only
      - "15672:15672" #external access via http://localhost:15672
    networks:
      - internal

  shoppingcart:
    image: shoppingcart
    build:
      context: .
      dockerfile: ./src/Services/ShoppingCart/WorkerService/Dockerfile
    environment:
      DOTNET_ENVIRONMENT: Staging #Environment 
    depends_on:
      mssql:
        condition: service_started
      rabbitmq:
        condition: service_started
    networks:
      - internal

  webapi:
    image: webapi
    build:
      context: .
      dockerfile: ./src/Web/WebAPI/Dockerfile
    environment:
      ASPNETCORE_URLS: http://*:5000
      ASPNETCORE_ENVIRONMENT: Staging #Environment
    ports:
      - "5000" #internal access only
    networks:
      - internal        

  webapp:
    image: webapp
    build:
      context: .
      dockerfile: ./src/Web/WebAPP/Dockerfile
    environment:
      ASPNETCORE_ENVIRONMENT: Staging #Environment
    ports:
      - "8080:80" #external access via http://localhost:8080
    depends_on:
      webapi:
        condition: service_started
    networks:
      - internal
      - external

networks:
  internal:
    name: internal
    driver: bridge
  external:
    name: external
    external: true  

About WebAPP settings by environment, for WebAPI consumption:

Development

{
  "HttpClientOptions": {
    "BaseAddress": "http://localhost:5000/"
  }
}

Staging

{
  "HttpClientOptions": {
    "BaseAddress": "http://webapi:5000/"
  }
}

All other services interact by name, only the WebAPP on NGINX does not.

The question is: How keep Docker name resolution (DNS) when NGINX consumes another service in the same network?

One more step has been taken to try to solve this. Another NGINX service just for reverse proxy was created and configured to use Docker resolver (127.0.0.11):

user nginx;
events {
  worker_connections 1024;
}
http {
    include mime.types;
    server {
        listen 80;
        resolver 127.0.0.11;
            
        location / {
            set $docker_host "webapp";
            proxy_pass http://$docker_host:80;
        }
    }
}

Any suggestions?