How to fixed websocket invalid frame header?

Question

I am running backend(nodejs server) at port 5000. And running frontend at reactjs. Peerjs also not connecting. Everytime it throwing

WebSocket connection to 'ws://localhost:5000/socket.io/?EIO=3&transport=websocket&sid=RpMvIyH3kAFbQpntAAAA' failed: Invalid frame header

I want keep frontend and backend in separate server.

Frontend(React)

    try {
        socket = io.connect('http://localhost:5000/'); 
    } catch (e) {
        console.error(e)
    }

BackEnd(Nodejs)

const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const { v4: uuidv4 } = require('uuid');
const { ExpressPeerServer } = require('peer');

const PORT = process.env.PORT ||  5000;
const peerServer = ExpressPeerServer(server, {
    debug: true
});

app.use('/peerjs', peerServer);

io.on('connection', (socket) => {
    socket.on('join-room', (roomId, userId) => {
        socket.join(roomId);
        socket.to(roomId).broadcast.emit('user-connected', userId);
        socket.on('message', message => {
            io.to(roomId).emit('createMessage', message);
        })
        socket.on('disconnect', () => {
            socket.to(roomId).broadcast.emit('user-disconnected', userId)
        })
    })
});


server.listen(PORT, () => {
    console.log(`Server has started on port ${PORT}`);
});