Reactjs 如何在取数后添加新数据，并在页面上保存旧数据

我具有向服务器发送请求以判断是否存在新的日志(log)消息的react 组件LogMessage.

export default function LogMessage () {
    const [logMessage, setLogMessage] = useState({});
    const fetchData = async () => {
        try {
            const response = await fetch('http://localhost:8989/get-log');
            const data = await response.json();
            setLogMessage(data);
        } catch (error) {
            console.error('Error fetching data:', error);
        }

    };
    useEffect(() => {
        const interval = setInterval(() => {
            fetchData();
          }, 1000);
          return () => clearInterval(interval);
      }, []);

    return (
        <div className="log">
            <p>Logger</p>
            <div className="log_wrapper">
                {Object.entries(logMessage).map(([key, message]) => (
                    <span>{message}</span>
                ))}
            </div>
        </div>
    )
}

每次获取时，我以前显示的消息都会被新的消息重新呈现，而不是添加到页面上已经显示的消息中. 回应似乎是这样的:

{
    "message1": "12:48:49:271  some text",
    "message2": "12:48:49:458  some text",
    "message3": "12:48:49:758  some text",
    "message4": "12:48:49:913  some text",
    "message5": "12:48:50:024  some text"
}

如果没有任何响应FETCH的新消息，则空的json返回{}.

有没有办法在页面上显示新消息和保存旧消息？