**In the input box of my app, I type a message and expect the message to be transmitted to the server and then transmitted back to the client so as to map the information to my UI.
While transmitting to the server seems to be working correctly, getting back the information from the socket.io server does not seem to work and returns an empty array.

Now the thing is when I input a message the first time, the server returns an empty array but when I input another message, the server now returns an array with one object instead of two. Also, the object it returns is the first message I typed initially and not the new one.

To sum everything up, server returns one object lesser than what it was given and what it returns is what it was given initially and not the new information.**

This is the client console at the first instant. The information passed is in the server console.
This is the server console at the first instant which appears to work correctly

Here is the client console at the second instant which returns what was passed in the first instance
This is the server console at the second instant which also appear to work correctly

Below is the client code

'use client'

import { io } from 'socket.io-client'
import { useEffect, useState } from 'react'
import { ChatSenderBox } from './ChatBox'
import { ChatRecieverBox } from './ChatBox'
import MessageInput from './MessageInput'


const ChatContainer = ({username, userImage}) => {

  const [socket, setSocket] = useState(undefined)
  const [allInfo, setAllInfo] = useState([])

  // sending all info to the socket
  const sendChatToServer = (chat) => {
    socket.emit('chat', chat)
  }

  //getting back the emitted message
  useEffect(()=>{
    const socket = io('http://localhost:3001')

    socket.on('chat', (chatRecieved) => {
      setAllInfo(chatRecieved)
    })

    setSocket(socket)
  }, [])



  // This is a function passed as prop to the messageInput component
  const addMessage = (chat) => {
    const newChat = {...chat, username, userImage}

    if(newChat.message !== ''){

      setAllInfo([...allInfo, newChat])
  
      sendChatToServer([...allInfo, newChat])

      console.log(allInfo)
    } 
  }


  const ChatsArrangment = () => {
    return allInfo.map((info, index) => {
      if(info.username === username) return 
        <ChatSenderBox
          key={index}
          username={info.username}
          profilePic={info.userImage}
          message={info.message}
        />

        return
          <ChatRecieverBox
            key={index}
            username={info.username}
            profilePic={info.userImage}
            message={info.message}
          />  
    })
  }

  return (
    <div className=' w-full h-full p-4 chatPage'>

      <ChatsArrangment />

      <MessageInput addMessage={addMessage}/>
    </div>
  )
}

export default ChatContainer

Below is the Server code

const express = require("express")
const http = require("http")
const { Server } = require("socket.io");
const app = express()

const server = http.createServer(app)
const io = new Server(server, {
    cors:{
        origin: 'http://localhost:3000',
        methods: ["GET", "POST"]
    }
})

io.on("connection", (socket) => {
    console.log("A user is connected")

    // messaged recieved and sent back to the client.
    socket.on("chat", (chat)=>{
        if(chat.lenght){
            io.emit("chat", chat)
        }
        console.log(chat)
    })

    socket.on("disconnect", ()=>{
        console.log("A user disconnected")
    })
})

server.listen(3001, () => console.log('listening to port 3001'))