messages returns an empty string

Question

My Next.js chat engine code returns an empty messages object. I typed messages on the ui before I replace the chat feed using renderChatFeed. I am able to return other properties like chats, activeChat, userName and useSecret. Please help.[![empty messages object][1]][1]

import { useRouter } from "next/navigation";
import { useEffect } from "react";
import { ChatEngine } from "react-chat-engine";
import "./Messages.scss";
import ChatFeed from "./components/ChatFeed";

const Messages = () => {
  const username = "someUserName";
  const password = "12345678";
  const projectID = "someProjectID";
  const router = useRouter();

  useEffect(() => {
    // Simulating user authentication check
    if (!localStorage.getItem("username")) {
      // Navigate to login if not authenticated
      router.push("/login");
    }
  }, [router]);

  return (
 
        <ChatEngine
          height="100vh"
          projectID={projectID}
          userName={username}
          userSecret={password}
          renderChatFeed={(chatAppProps) => <ChatFeed {...chatAppProps} />}
        />
  
  );
};

export default Messages;


  [1]: https://i.sstatic.net/VW9rf.png