ReactJS и Socket.io: состояние сбрасывается до начального значения после получения нового сообщения от сервера websocket

Question

Я создаю простое приложение чата, используя reactJS и socket.io для webSocket, но когда я получил новое сообщение от сервера, чтобы добавить его в состояние массива сообщений, оно сбрасывается до начального значения, которое является пустым массивом:

import React, { useState, useEffect } from "react";
import socketIOClient from "socket.io-client";

let socket;

export default () => {
  const [messages,setMessages]=useState([]);

  useEffect(() => {
    socket = socketIOClient("https://localhost:5000");;
    
    socket.on("resp-chat-user",  data => {
        setMessages([{
            message:data.message,
          }]);;
    })
    return () => socket.close();  
  }, []);


  const SendMessage=(msg)=>{
    if(msg && msg!="")
    {
      socket.emit("req-chat-user", {
        message:msg,
        to: SOCKET_ID
      });
      setMessages([...messages,{
        message:msg
      }])
    }
  }

  return (
      <>
    <ul>
        {messages.map(msg=>(
            <li>{msg}</li>
        ))}
    </ul>
    <button type="submit" onClick={()=>SendMessage("HOLA")}>send</button>
    </>
  );
};

Answer 1

способ, которым я обновляю состояние внутри прослушивателя сокета, неверен, я должен использовать:

   setMessages(messages => [ ...messages, {
      type:"other",
      message:data.message,
    } ]);

вместо

  setMessages([ ...messages, {
      type:"other",
      message:data.message,
    } ]);