Reactjs 表单未反映提交时的更改

这是我的代码

  const [messages, setMessages] = useState(messagesList);

  const [addMessage, setAddMessage] = useState({
    messageSent: '',
  });

  const addMessageChange = (event) => {
    event.preventDefault();
    const fieldName = event.target.getAttribute("name");
    const fieldValue = event.target.value;
    const addMessageData = { ...addMessage };
    addMessageData[fieldName] = fieldValue;
    setAddMessage(addMessageData);
  };

  const addMessageSubmit = (event) => {
    event.preventDefault();
    const newMessage = {
      id: 18,
      sender: "Aakanksha Mantri",
      textMessage: addMessage.messageSent,
      sentbyUser: true,
      time: "00:45",
    };

    const newMessages = [...messages, newMessage];
    setMessages(newMessages);
  };

<div className="chat-body">
        {messagesList.map((messageData) => (
          <div className={messageData.sentbyUser ? 'message-received' : 'message-sent'}>
            <p className="message-name">{messageData.sender}</p>
            {messageData.text} <span className="message-time">{messageData.time}</span>
          </div>
        ))}
      </div>

<form onSubmit={addMessageSubmit}>
  <div className="message-input">
    <input type="text" placeholder="Type a message" name="messageSent" onChange={addMessageChange}></input>
    <button type="submit">Send!</button>
  </div>
</form>

在提交时，我希望将输入的消息添加到包含虚拟数据且已导入的json文件中.此外，聊天正文div应该反映在表单提交时所做的更改.