Socket I.O configuration with NodeJs and Nginx is not working based on the documentation

I’m deploying my app version with newly configured websocket . I’m using socket.io library, nodejs in the server backend, react in frontend and nginx as a reverse proxy. However, unfortunately it’s not working when I deploy it to production. There is no error being log and most of the configuration I searched are not working.

NGINX CONFIGURATION:

    # API Server
    map $http_origin $port {
    default 0;
    ~(https://(www.domain).com) 8080;
    ~(https://(preprod.domain).com) 8081;
    ~(https://(dashboard.domain).com) 8082;
    }

   map $arg_destination $destination {
    default 0;
    server 1; # dashboard.domain.com @ port 8082
    remote 2; # www.domain.com @ port 8080
   }

   server {
    include /etc/nginx/includes/my_folder/port.conf;
    server_name api.domain.com;
    include /etc/nginx/includes/my_folder/ssl.conf;

    if ($blocked_user_ip = 1) {
            return 403;
    }

    if ($port = 0) {
            return 403;
    }

    location / {
            include /etc/nginx/includes/my_folder/added_headers.conf;
            include /etc/nginx/includes/my_folder/proxy_headers.conf;
            if ($destination = 2) {
                    proxy_pass http://127.0.0.1:8080;
            }
            if ($destination = 1) {
                    proxy_pass http://127.0.0.1:8082;
            }
            if ($destination = 0) {
                    // PORT 8081 will pass here
                    proxy_pass http://127.0.0.1:$port;
            }
    }

    error_page 403 @error;
    location @error {
            root /var/www/my_directory/errors;
            try_files /403.html /403.html;
    }
}

NODEJS CONFIGURATION:

const express = require('express')
const app = express()
const { createServer } = require('http')
const httpServer = createServer(app)
const io = require('socket.io')(httpServer, { 
   cors: { 
     origin: [process.env.CLIENT_URL, process.env.DASHBOARD_CLIENT_URL] 
     } 
})

io.on('connection', (socket) => {
  socket.on('test', (data) => {
     // THIS MESSAGE IS NOT LOG. BECAUSE THE SERVER IS NOT RECEIVING IT FROM THE CLIENT.
     console.log(data?.message) // Hi, Server!
  })
  // Other codes...
})

const server = httpServer.listen(8081)
module.exports = server

REACT CONFIGURATION:

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

const socket = io('https://api.domain.com', {})

socket.emit('test', { message: 'Hi Server!'})

// Other codes...

VERSIONS:

NGINX: 1.18.0 (Ubuntu)

NODEJS: v18.12.1

REACT: 18.2.0

EXPRESS: 4.18.2

SUMMARY: The general issue is the backend and frontend are not connected. It happens only in production but in local, its working properly.