title: mapping function doesn't show any results
body: <p>Here i want to show the list of messages ,but the map seems doesn't work i'm getting the data through over the <code>console.log</code></p>
  <p>please help me where i'm wrong thanks in advance
  <a href="https://i.stack.imgur.com/5I93F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5I93F.png" alt="enter image description here" /></a></p>
  <pre><code>const [messages, setMessages] =  React.useState([]);
  
  const  handleSendMessage = () =&gt;{
  var mesg = document.getElementById('message').value;
  socket.emit('send_message', mesg)
    let newState = ([...messages,mesg]);
    setMessages(newState);
  }
  
  useEffect(() =&gt; {
  console.log(&quot;messages...&quot;, messages)
  }, [messages]);
  
  
    { messages.map((data,key)=&gt;{                
       &lt;li className=&quot;mar-btm&quot;&gt;
          {data}
       &lt;/li&gt;
     })}
  </code></pre>