Socket.io second host is not listening to event

Question

I'm building a project which consists of multiplayer tic tac toe using socket.io. When a player clicks on the "new game" button, he's redirected to the game page waiting for a second player to connect to start playing. But when both players are indexed on the page (and therefore the game should start) only the first player starts the game, while the second one waits indefinitely (as if he were the only one to have connected)

The GamePage code:

import { useContext, Fragment, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

import { socket } from '../../index';
import { GameContext } from '../../contexts/game/game.context';
import Grid from '../../components/grid/grid.component';

import './game.styles.scss';

const GamePage = () => {
    const navigate = useNavigate();
    const [isGameStarted, setIsGamestarted] = useState(false);
    const { currentPlayer, setCurrentPlayer } = useContext(GameContext);

    socket.off('startGame').on('startGame', readyPlayers => {
        console.log(readyPlayers)
        socket.id === readyPlayers.firstPlayer ?
            setCurrentPlayer('X')
        :
            setCurrentPlayer('O')                
    })

    useEffect(() => {
        setIsGamestarted(currentPlayer)
    }, [currentPlayer])

    return (
        <div className='game-page'>   
        {
            isGameStarted ? 
            (
                <Grid />
            ) : (
                <Fragment>
                    <span>Finding opponents...</span>                   
                    <button onClick={() => {
                        navigate('/', {replace: true})
                    }}>
                        go back
                    </button>   
                </Fragment>
            )
        }           
        </div>
    )
}

export default GamePage;

The server.js code:

const server = require('http').createServer();
const io = require('socket.io')(server, {
    cors: {
        origin: '*',
        methods: ['GET', 'POST']
    }
})

const PORT = 4000;

server.listen(PORT);
console.log(`Listening on port ${PORT}...`);

let readyPlayers = [];

io.on('connection', (socket) => { 
    console.log('a user connected', socket.id)

    socket.on('ready', () => {
        console.log('Player ready', socket.id)
        readyPlayers.push(socket.id);
        console.log(readyPlayers.length)

        if(readyPlayers.length === 2) {
            io.emit('startGame', {
                firstPlayer: readyPlayers[0],
                secondPlayer: readyPlayers[1]
            })
            readyPlayers = [];
            console.log('game started')
        }
    }) 
 
    socket.on('move', moveData => {
        socket.broadcast.emit('move', moveData)
    })
}) 

Here the screenshots of the pages and the console of the server. I thank in advance whoever tries to give me an answer