React CodeMirror doesn't update when status changes

Question

I am building a collaborative javascript editor. For this, I am using React CodeMirror with Socket.io and Express. The editor is a component called CodeMirror.jsx that uses the JedWatson/react-codemirror package.

I have a state called code, which maintains the editor code and i update every time a socket notification arrives. I send this code state as a value parameter of the component.

The socket broadcast works fine, the state is modified from the socket, but the code inside CodeMirror is not modified. If I show the code state in a textbox, it is updated, but not in the CodeMirror component.

This is the CodeMirror.jsx component:

import React, { useState, useEffect } from "react";
import {ButtonGroup, Button, Modal, Table } from 'react-bootstrap';
import Codemirror from 'react-codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/monokai.css';
import 'codemirror/mode/javascript/javascript.js'
const io = require('socket.io-client')
const socket = io("http://localhost:8000")

const CodeMirror = ({...props}) => {
  const [code, setCode] = useState('');
  const link= "http://localhost:8000/canal/"+props.experiencia+"/"+props.canal

  const options = {
    lineNumbers: true,
    mode: 'javascript',
    theme: 'monokai',

    }

  useEffect(function() {
      console.log("conectando..."+props.canal)
      socket.emit('canalIn', {experiencia: props.experiencia._id, canal: props.canal});
      socket.on('codeoEmit', (payload) =>  {
        updateCodeFromSockets(payload)})
      return () => {
        socket.disconnect();
      }
  }, []);


  const updateCodeFromSockets = (payload) => {
    console.log("recibi update "+payload.newCode)
    //este set code no actualiza el componente
    setCode(payload.newCode)
  }
       

  const updateCodeInState = (newText) => {
    setCode(newText)
    console.log("conectando para actualizar..."+props.canal)
    socket.emit('canalIn', {experiencia: props.experiencia._id, canal: props.canal});
    //publicamos el evento
    socket.emit('codeoEvent', {
      canal: props.canal,
      newCode: newText
    })
    //socket.disconnect();
  }
        


    return (
      <div>

        <Codemirror
          value={code}
          autoFocus= {true}
          onChange={updateCodeInState}
          options={options} />
        <hr/>
          
      </div>
    )

}

export default CodeMirror

And this is the server code:

const server = app.listen(apiPort, () => console.log(`Server running on port ${apiPort}`))
const io = require('socket.io')(server);
//webSockets
io.on('connection', (socket) => {
  //console.log('a user connected');

  socket.on('disconnect', () => {
    console.log('user disconnected');
  });

  //este evento es el que captura el coding
  socket.on('canalIn', function(data) {
    socket.join(data.canal);
    console.log('canalIn: ' + data.canal);
  });

  socket.on('codeoEvent', function(data) {
    console.log('emitiendo al canal: ' + data.canal+ ' el code '  + data.newCode);
    socket.broadcast.to(data.canal).emit('codeoEmit', data);

  })
}