host not found in upstream with nginx docker compose

I know this question has been asked many times however, none of the solutions have worked for me.

I am trying to dockerize my angular app and node js backend using nginx.

What I have done is that I have created a docker-compose file.
It has three services and nginx.

1: space-frontend

2: space-api

3: mongodb

I am calling frontend and backend by their service name in nginx conf file like http://space-frontend:80 and http://space-api:3000 but I am getting a error in logs

[emerg] 1#1: host not found in upstream "space-api" in /etc/nginx/nginx.conf:23

and frontend is working fine.
I am unable to understand where I am missing something.

For reference,
My frontend docker file

FROM node:16-alpine AS builder
WORKDIR /app
COPY . .
RUN npm i && npm run build --prod
FROM nginx:alpine
RUN mkdir /app
COPY --from=builder /app/dist/Space-Locator/browser /app
COPY nginx.conf /etc/nginx/nginx.conf

My frontend nginx conf

events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;

server {
listen       80;
server_name  localhost;
root /app;

location / {
    index  index.html;
    try_files $uri $uri/ /index.html;
}

error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}
}
}

Backend api docker file

FROM node:14-alpine as build-step
RUN mkdir -p /usr/app
WORKDIR /usr/app
COPY package.*json /usr/app/
RUN npm install
COPY . /usr/app/
EXPOSE 3000
CMD [ "npm", "start" ]

my docker-compose file

    version: "3.8"
services:
  reverse_proxy:
    image: nginx:1.17.10
    container_name: reverse_proxy
    depends_on:
      - space-frontend
      - space-api
      - database
    volumes:
      - ./reverse_proxy/nginx.conf:/etc/nginx/nginx.conf  
    ports:
      - 80:80
  space-frontend:
    container_name: space-frontend
    image: space-frontend
    build: 
      context: ./space-frontend
    ports:
      - 4000:80
  space-api:
    container_name: space-api
    hostname: space-api
    image: space-api
    build: 
      context: ./space-api
    ports:
      - 3000:3000
    links:
      - database  
    environment:
      MONGO_INITDB_DATABASE: spaceLocator 
      MONGODB_URI: mongodb://db:27017
    depends_on:
      - database
    volumes:
      - ./db-data/mongo/:/data/database
    networks:
      - node-network
  database:
    container_name: db
    image: mongo
    restart: on-failure
    ports:
      - 27017:27017
    volumes:
      - ./mongodb:/data/database
    networks:
      - node-network  
volumes:
  dbdata6:
networks:
  node-network:
    external: true
    driver: bridge  

and my nginx.conf file for reverse proxy

   events {
    worker_connections 1024;
}
http {

  server {
        listen 80;
        server_name  127.0.0.1;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        
        location ~* .(eot|ttf|woff|woff2)$ {
        add_header Access-Control-Allow-Origin *;
        }

        location / {
          proxy_pass http://space-frontend:80;
          proxy_set_header X-Forwarded-For $remote_addr;
        }

        location /api {
            proxy_pass http://space-api:3000;
            proxy_set_header X-Forwarded-For $remote_addr;
        }
    }
}

Can somebody please point to the direction where I am doing wrong?
I have tried adding hostname but they are as same as container-name.