Reactjs add values from my websocket to components

Question

Hello I’m starting to study Act and I find myself in a doubt:

good I have a page with the following structure:

import React from 'react';

export default function Home(){
    return (
        <>
           <h1 id="resultado"></h1>
                <div id="player-1" class="user-panel">
                    <p>Nome: <span class="nome"></span></p>
                    <p>Pontos: <span class="pontos">0</span></p>
                    <div class="botoes">
                        <button>Pedra</button>
                        <button>Papel</button>
                        <button>Tesoura</button>
                    </div>
                    <div class="jogada"></div>
                </div>

                <br />
                <br />
                <br />

                <div id="player-2" class="user-panel">
                    <p>Nome: <span class="nome"></span></p>
                    <p>Pontos: <span class="pontos">0</span></p>
                    <div class="botoes">
                        <button>Pedra</button>
                        <button>Papel</button>
                        <button>Tesoura</button>
                    </div>
                    <div class="jogada"></div>
                </div>

                <p id="espera"></p>  
        </>
    )
}

Where I will open a connection with the socket and pick up information like Name / Points / Winner etc etc etc. Ai enters my question in html I would call my script.js and communicate with the socket catch reply etc and popular my components, but I’m doubtful how I would do it in React.

var socket = io();

var nome = prompt("Seu nome é:");
socket.emit('adicionar-jogador', nome);

socket.on('player conectado', function(data){
  $('#player-1').attr('usarioId', data[0].id);
  $('#player-2').attr('usarioId', data[1].id);

  if (socket.id !== $('#player-1').attr('usarioId')) {
    $('#player-1 button').attr('disabled', true);
  } else {
    $('#player-2 button').attr('disabled', true);
  }

});

socket.on('atualizar nomes', function(data){
  $('#player-1 .nome').html(data[0]);
  $('#player-2 .nome').html(data[1]);
});

$('#player-1 .botoes button').click(function() {
  var jogada = $(this).text().toLowerCase();

  socket.emit('jogada-player-1', jogada);
});

$('#player-2 .botoes button').click(function() {
  var jogada = $(this).text().toLowerCase();

  socket.emit('jogada-player-2', jogada);
});

socket.on('resultado', function(data){
  $('#resultado').html(data[0] + ' venceu!');
  $('#player-1 .pontos').html(data[1]);
  $('#player-2 .pontos').html(data[2]);

});

socket.on('player desconectado', function(data){
  $('#player-'+data+' .nome').html('');
});

socket.on('atualizar jogada', function (data) {
  $('#player-'+data[0]+' .jogada').html(data[1]);
});

socket.on('player na lista de espera', function (data) {
  console.log(data);
  var stringPlayers = '';
  data.forEach(function (player){
    stringPlayers += player.nome+", ";
  });
  $('#espera').html(stringPlayers);
});

my communication script would basically be this.