Socket.io Socket.onPacket Error with reverse proxy Nginx

I have a small angular app who comunicate with a node.js server. Both are deployed on aws and I use Nginx reverse proxy to acess the node.js server at the port 4000.

All end-points of the nodejs.server works fine, except the socket.io connection.
When I run both apps (front end app and the node.js server) in my machinine the socket.io connection works fine, but when I try to deploy it on aws I get this error in the front-end app:

Error: server error
        at Socket.onPacket (socket.js:401)
        at XHR.<anonymous> (socket.js:216)
        at XHR.push.dMso.Emitter.emit (index.js:145)
        at XHR.onPacket (transport.js:103)
        at callback (polling.js:101)
        at Array.forEach (<anonymous>)
        at XHR.onData (polling.js:105)
        at Request.<anonymous> (polling-xhr.js:94)
        at Request.push.dMso.Emitter.emit (index.js:145)
        at Request.onData (polling-xhr.js:236)

This is my Nginx configuration in /etc/nginx/sites-available/default:

server{
  charset utf-8;
  listen 80 default_server;
  server_name 18.231.153.164;

  # angular app & front-end files
  location / {

      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host;


      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";

      root /opt/front-end/dist/admin;
      try_files $uri /index.html;
}

  # node api reverse proxy
  location /api/ {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host; 
      proxy_pass http://localhost:4000/;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade"; 
}

  # node api reverse proxy
  location /socket.io {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host; 
      proxy_pass http://localhost:4000/;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade"; 
}

As you can see, my node.js is running at port 4000, so everytime someone try to access the web site with the path /api/ it will be redirected to the node.js server.

Here is a piece of my node.js code:

const socketio = require('socket.io');
const express = require('express');
const app = express();

const port = 4000;
const httpServer = app.listen(port, () => {
    console.log('Server listening on port ' + port);
});


let io = socketio(httpServer, {
  cors: {
    origin: "http://localhost:5200",
  },
});

// auth moddleware
io.use((socket, next, err) => {
    const jwtToken = socket.handshake.query.jwtToken;
    // console.log('token --> ', jwtToken);

    const user = socket.handshake.query.user;
    if (!user) {return};
    socket.user = JSON.parse(user);
    next();
 });

io.on('connection', (socket) => {
    socket.emit('messageFromServer', {data: 'Welcome to server'});
})

Here is a piece of my front-end code:

import {io} from 'socket.io-client';

...

// Connect to server (When I am running locally I change '/api' to 'http://localhost:4000' 
this.socket = io('/api', {secure: true, reconnection: true, rejectUnauthorized: false, query: {user: user, jwtToken: this.authService.authValue.jwtToken}});

// Listen to events
this.socket.on('usersOnline', (usersOnline) => {
  console.log('Users online now:', usersOnline);
});

this.socket.on('connect_error', (err) => {
    console.log('ERR::', err);
  });

The version of socket.io in the server is "^4.0.0", and the version of the socket.io-client in front and is "^4.0.0".

I believe this issue is related with the reverse proxy and socket.io somehow. As I told before, the socket.io connection works fine in local envoriment.

Can someone please help me?