React Array.map() function not returning anything [duplicate]

I am making a chat app and everytime someone sends a message an useState element gets updated adding his message to the list. For some reason when the messages array gets updates, messages.map function doesn’t add it onto the screen. Here is my code.

const SendMessage = () => {
    let temp = messages;
    let currentDate = new Date();
    let vreme = currentDate.getHours() + ":" + currentDate.getMinutes();
    temp.push(JSON.stringify({
      from: "me",
      text: divText,
      time: vreme
    }));
    setMessages(temp);
    console.log(messages);
    document.querySelector(".chat-input").innerHTML = "";
  }

<div className='chat-box'>
          <span className='razmak'></span>
          {messages.length > 0 && messages.map((item) => {
            return (<span key={item}>{item}</span>)
            // let object = JSON.parse(item);
            // if (object.from === "me") {
            //   return (
            //     <MessageRight key={object.text} text={object.text} time={object.time}></MessageRight>
            //   )
            // }
            // else
            // {
            //   return (
            //     <MessageLeft key={object.text} username={object.from} text={object.text} time={object.time}></MessageLeft>
            //   )
            // }
          })}
          {!messages.length > 0 && <span>No messages</span>}
        </div>