React JS socket IO disconnection issue

Question

I'm creating a chat application where Backend is in Node.js and Frontend is in ReactJS.

Here is the client-side code to connect with Socket IO.

socketRef.current = io("SOCKET-URL", {
    transports: ["websocket"],
    upgrade: false,
    reconnection: true,
});

and Backend Node.js code is as follow.

const io = new Server(httpsServer, {
    pingInterval: 25000,
    pingTimeout: 60000,
    cors: {
        methods: ["GET", "POST"],
    },
})

Now we're having issues with socket disconnection and it is being disconnected frequently. Obviously, I've handled reconnection after disconnection though it is not working as expected. I've tried multiple scenarios i.e Long Polling fails and XHR Long Polling. During my R&D, it seems like we've to resolve it from FrontEnd but not sure how. :).

Also, I've handled a queue mechanism to receive multiple messages in Backend. I've written code in ReactJS to send N number of messages one by one but it is being disconnected after some messages and it stuck. My goal is, all messages must be received by receiver without any error from Socket. Herewith attached screenshot for reference.

FYI. I'm using Socket.IO 4.4.0 version for both.

Please help me to resolve this problem.