Estoy creando una aplicación web de chat en tiempo real simple usando socket.io y en la parte frontal recibo demasiados errores de procesamiento , aunque todos mis estados establecidos están fuera de la parte de retorno del Componente. Adjunté el código para App.js de la parte frontal de React

Perdón por la actitud ingenua, soy un programador novato y esta es mi primera pregunta

 function App() { const [name, setName] = useState(""); const [msg, setMsg] = useState(""); const [chat, setChat] = useState([]); useEffect(() => { socket.on("connect", () => { console.log( `Connected`); }); socket.on("message", (msg_obj) => { ChatList(msg_obj); }); }, []); function ChatList(msg_obj){ setChat((chat) => [...chat, msg_obj]); } function addChat () { const id = socket.id; socket.emit("message", { id, msg, name }); setMsg(""); }; function settingname(tobenamed) { setName(tobenamed); } function settingmessage(messagevalue) { setMsg(messagevalue); } return ( <div className="App"> <header className="App-header"> <div className="chat-area"> {chat.map((msg_obj) => { return ( <span className="Block"> <h4 key={msg_obj.id}>{msg_obj.name}</h4> <p> {msg_obj.msg} </p> </span> ) })} </div> <form id="chatter-form"> <input type="text" placeholder="Enter username" className="username-field" onChange={ (event) => { settingname(event.target.value); } } /> <button className="username-submit" >Go</button> <input type="text" placeholder="Enter username" className="message-field" onChange={(event) => { settingmessage(event.target.value); }} /> <button className="message-submit" onClick={addChat()}>SEND</button> </form> </header> </div> ); }```