WebSocket connection invalid frame header

I'm using 2 libraries called PeerJS and Socket.IO.

I'm running an "Express Peer Server" and Socket.IO. on the same server.

I just added this block of code to my server.js file to create the Express Peer Server

const { ExpressPeerServer } = require('peer');

const peerServer = ExpressPeerServer(server, {
  debug: true,
});

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

and now I'm getting this error:

WebSocket connection to 'ws://localhost:3000/socket.io/?EIO=4&transport=websocket&sid=IKER9454IKCORTIEaORKA' failed: Invalid frame header

What is causing this error and how can I fix it?

server.js

const express        = require('express');
const app            = express();
const server         = require('http').createServer(app);
const io             = require('socket.io')(server);
const { v4: uuidv4 } = require('uuid');  
app.set('view engine', 'ejs');
app.use(express.static('public'));


// added ExpressPeerServer - error began to occur when I added this block of code
const { ExpressPeerServer } = require('peer');

const peerServer = ExpressPeerServer(server, {
  debug: true,
});

app.use('/peerjs', peerServer);
// end added ExpressPeerServer


io.on('connection', (socket) => {
    console.log(`server: ${socket.id} has connected`);

    socket.on('peer-id', (peerId) => {
        console.log('server: PeerId created: ' + peerId);
        socket.broadcast.emit('peer', peerId);
    });
});

app.get('/', (req, res) => {
    res.redirect(`/${uuidv4()}`);
});

app.get('/:roomId', (req, res) => {
    res.render('room.ejs');
});

server.listen('3000');