i have a simple react demo where to show websocket messages, but the .map function inside return statements returns nothing. No errors and no messages. Can anyone explain where the problem is in here?

```
const [messages, setMessages] = React.useState([])

//push the websocket messages response to const messages
const addMessage = (message) => {
    let n = messages;
    let d = message;
    n.push(d);
    setMessages(n)

    //the following both works as expected
    messages.map((item) => {
        console.log('message', item.message)
    })
    messages.map((message, index) =>
        console.log(message,index)
    )
}

```

Now the problem in return statement: Here was nothing returned.

```
 return (
   <div>
     {
       messages.map(function(message, index){
         return (<p id={'t'+index}>{message.message}</p>)
       }),

       messages.map((message, index) =>{
         return (<p id={'z'+index}>{message.message}</p>)
       })
     }
  </div>
)

```

Maybe the return statement is not rerendered after receiving websocket message?
I hope anyone have an idea and can explain the problem.