I am making a simple real-time chat web-app using socket.io and in the frontend part I am getting Too many render error , even though all my setState are outside the return part of Component I have attached the code for App.js of React frontend part

Pardon me for naive attitude , I am a novice programmer and this is my first question

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>
  );
}```