WebSocketClient.js:16 WebSocket connection to 'wss://mydomain.com:3000/ws' failed:

Question

I get the above error in my console when I run my application on my nginx server WebSocketClient.js:16 WebSocket connection to 'wss://mydomain.com:3000/ws' failed:

Here's my configuration for my server

location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }


location /api {
        proxy_pass http://localhost:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }


 location ~* \.io {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header X-NginX-Proxy false;

      proxy_pass http://localhost:3000;
      proxy_redirect off;

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

I configured my socketIO as

  useEffect(() => {
    if (!socket.current) {
      socket.current = io(process.env.REACT_APP_API)
    }

    if (socket.current) {
      socket.current.emit('join', { userId: user._id })

      socket.current.on('connectedUsers', ({ users }) => {
        users.length > 0 && setConnectedUsers(users)
      })
   }

MY environment variable for REACT_APP_API is '/' which is the root directory.

I don't know what I am missing, or if there's some extra config to be made for nginx server to work for websocket.

This works well in my localhost.

PS: I am running my nginx on https