Estoy creando una pequeña aplicación de chat, pero tengo problemas para recibir mensajes en reaccionar. El problema es que cuando recibo un mensaje, setMessages , pero al mismo tiempo se borra el estado de los messages . El problema es probablemente que no sé dónde colocar socket.on , actualmente está dentro de un useEffect .

 export const Room = ({ socket }) => { const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); const { id } = useParams(); useEffect(() => { socket.emit("join room", id); }, []); useEffect(() => { socket.on("message", (message) => { setMessages([ ...messages, { message: message, createdBy: "other", id: uuidv4() }, ]); }); }, []); const sendMessage = () => { console.log("send"); socket.emit("message", input); setMessages([ ...messages, { message: input, createdBy: "me", id: uuidv4() }, ]); }; console.log("foo"); return ( <div className="flex justify-center text-center"> <div className="w-screen h-screen px-2 max-w-4xl mt-10"> <p className="text-3xl">Code: {id}</p> <div className="bg-white w-full h-3/4 rounded-xl border-2 border-black overflow-y-auto"> {messages.map((message) => ( <Message text={message.message} createdBy={message.createdBy} key={message.id} /> ))} </div> <div className="flex flex-row border-2 border-black mt-2 rounded-xl p-2 bg-white"> <input className="flex-grow border-none focus:outline-none" onInput={(e) => setInput(e.target.value)} /> <button className=" bg-green-500 rounded-xl px-2 py-1" onClick={sendMessage} > Send </button> </div> </div> </div> ); };