Storing history in React seems to cause a re-render loop about deep-chat HOT 1 CLOSED

import { MessageContent } from 'deep-chat/dist/types/messages';
import {DeepChat} from 'deep-chat';
import dynamic from 'next/dynamic';
import {useRef} from 'react';

export default function Home() {
  const chatContainerRef = useRef<HTMLDivElement>(null);

  const DeepChat = dynamic(() => import('deep-chat-react').then((mod) => mod.DeepChat), {
    ssr: false,
  });

  const getChatHistory = (): MessageContent[] => {
    const storedHistory = localStorage.getItem('messages');
    if (storedHistory) {
      return JSON.parse(storedHistory);
    } else return [];
  };

  const updateChatHistory = () => {
    if (!chatContainerRef.current) return;
    const deepChatElement = chatContainerRef.current.children[0] as DeepChat;
    localStorage.setItem('messages', JSON.stringify(deepChatElement.getMessages()));
  };

  return (
    <div ref={chatContainerRef}>
      <DeepChat
        demo={true}
        history={getChatHistory()}
        onMessage={({isHistory}) => {
          if (!isHistory) updateChatHistory();
        }}
      ></DeepChat>
    </div>
  );
}

import {MessageContent} from 'deep-chat/dist/types/messages';
import dynamic from 'next/dynamic';

export default function Home() {
  const DeepChat = dynamic(() => import('deep-chat-react').then((mod) => mod.DeepChat), {
    ssr: false,
  });

  const getChatHistory = (): MessageContent[] => {
    const storedHistory = localStorage.getItem('messages');
    if (storedHistory) {
      return JSON.parse(storedHistory);
    } else return [];
  };

  const updateChatHistory = (message: MessageContent) => {
    const history = getChatHistory();
    history.push(message);
    localStorage.setItem('messages', JSON.stringify(history));
  };

  return (
    <DeepChat
      demo={true}
      history={getChatHistory()}
      onMessage={({message, isHistory}) => {
        if (!isHistory) updateChatHistory(message);
      }}
    ></DeepChat>
  );
}