Using socket io with nginx and AWS EC2 instances

I am running into an issue still with my socket io client not connecting to my backend. I have looked through different questions regarding websocket and containerization in the cloud but I have yet to solve my issue. I have one proxy server (nginx) along with a cluster of nodes hosting replicas (docker swarm) of my frontend and backend.

Nginx.conf (Also using certbot to configure my conf to https)

upstream frontend_server {
    least_conn;
    server frontend:3000;
}

upstream backend_server {
    least_conn;
    server backend:7000
}



server{
    listen 80;
    listen [::]:80;

    server_name mydomain.com;

    if ($request_method = "Options"){
        return 203;
    }

    location / {
        proxy_pass http://frontend_server;
    }

    location /api/ {
        proxy_pass http://backend_server;
        proxy_pass_request_headers  on;
    }

    location /chat-socket/ {
        proxy_pass http://backend_server/;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_http_version 1.1;
        proxy_cache_bypass $http_upgrade;
    }
}

backend server socket

const app: Express = express();

// ----middleware setup-----

const whitelist: CorsOptions = {
  origin: [CONFIG.ORIGINS], //Origin currently set to "*" wildcard
  credentials: true,
  optionsSuccessStatus: 204,
  methods: ["GET", "POST"],
};
const server: Server = createServer(app);
const io = new Srv(server, {
  cors: whitelist,
  path: CONFIG.PATH, // "/chat-socket" 
  transports: ["websocket", "polling"],
});

frontend socket client (React TS)

const socket = useRef<Socket>();
useEffect(()=>{
  socket.current = connect(DOMAIN, { path: PATH }); //DOMAIN = mydomain.com, PATH = /chat-socket
  // extra logic
}

docker-compose file

services:
  webproxy:
    networks:
      - frontend
    image: kdboateng/hangout-nginx
    ports:
      - "80:80"
      - "443:443"

  frontend:
    networks:
      - frontend
    container_name: frontend
    image: "Image from my repository containing socket client"
    ports:
      - "3000:3000"

  backend:
    networks:
      - frontend
      - backend
    container_name: backend
    image: "Image from my repository containing socket server"
    ports:
      - "7000:7000"
    environment:
      - CHAT_PORT=7000
      - EXPIRES_IN=60000
      - CORS_ORIGIN=*
      - LOGGER=dev
      - MAX_CAPACITY=20
      - REDIS_CACHE_IP=redis
      - REDIS_CACHE_PORT=6379
      - ROOM_ID_FORMAT=hex
      - TOKEN_LENGTH=10

  redis:
    networks:
      - backend
    container_name: redis
    image: "Image from my repository"
    ports:
      - "6379:6379"

networks:
  frontend:
    external: false
  backend:
    external: false

I am using docker stack (swarm orchestration) to handle replicas and other things across different AWS EC2 instances. I have the compose file also handling running containers on specific host so there is no mistake which instance is hosting the actual client and server. There is not an issue with regular REST-proxied request, or even when the client and server are on the same instance but when they are separated, the error I am getting from Chrome dev tools is "Websocket closed before connection" and infinite polling of GET/POST request. Is this an issue with the conf file or socket set up?