Client's two socket connection with different path overlaps the second connection

Question

I'm having two client connections in flutter based on the condition of the list, and Server has two server sockets with different ports and different Handshake paths for clients to easily connect.

Server :

Name     | Port | Handshake path 
Socket A | 3001 | /one
Socket B | 3002 | /two

so while connecting from the flutter application whichever the listItem I open first, connection with specified handshake path is established.

Items | HandshakePath
Item1 | /one
Item2 | /two
Item3 | /one

For the above scenario when I Click on Item 1 it makes a connection with /one socket on the server and everything work fine, but after that when I click on Item2 it still creates a connection on /one path, and this same for Vice versa, whichever connection is made first, stays connected and overlaps the second connection.

Connection Class 1

Class One{
 IO.Socket _socket;
 connect(){
 _socket = IO.io(
        deployment ? _serverIP : SERVER_ONE,
        IO.OptionBuilder()
            .setTransports([
              'websocket'
            ]) 
            .setQuery({
              "info": _fromUser,
            })
            .setPath(deployment ? "/one" : "/socket.io")
            .disableAutoConnect()
            .build());
 }
}

Connection Class 2

Class Two{
 IO.Socket _socket;
 connect(){
 _socket = IO.io(
        deployment ? _serverIP : SERVER_TWO,
        IO.OptionBuilder()
            .setTransports([
              'websocket'
            ]) 
            .setQuery({
              "user1": _fromUser1,
              "user2": _fromUser2,
            })
            .setPath(deployment ? "/two" : "/socket.io")
            .disableAutoConnect()
            .build());
 }
}

connection with the local server is working perfectly fine, I guess it's because of the different ports mentioned in ENV variables, but on the server, I've set up routing forwarding to different ports based on the path.