home.js

export default function Auth({ parseQuery }) {
    //pre existing functions 
  const order = (messages) => messages.sort((a, b) => a.get("createdAt") - b.get("createdAt"))

  return (
    <div className={styles.container}>
      <div className={styles.messagesContainer}>
        <ul ref={listRef}>
          {messages &&
            order(messages).map((message, id) => (
              <div
                key={message.id}
                className={messageClassName(message.get("senderId"))}
              >
                <li className={messageClassName(message.get("senderId"))}>
                  <span className={messageClassName(message.get("senderId"))}>
                    {message.get('senderName')}
                  </span>
                  <p>{message.get("content")}</p>
                </li>
              </div>
            ))}
        </ul>
      </div>
      <form onSubmit={handleSubmitMessage} className={styles.actionsContainer}>
        <input value={inputMessage} onChange={handleupdateInput} />
        <button>send message</button>
      </form>
    </div>
  );
}