React state disappearing

I have a react app that uses the MS Graph API (so it's a bit difficult to post a minimal reproducible example). It has a state variable called chats that is designed to hold the result of fetching a list of chats from the graph API. I have to poll the API frequently to get new chats.

I query the chats endpoint, build an array of newChats and then setChats. I then set a timeout that refreshes the data every 10 seconds (it checks for premature invocation through the timestamp property stored in the state). If the component is unmounted, a flag is set, live (useRef), which stops the refresh process. Each chat object is then rendered by the Chat component (not shown).

Here's the code (I've edited by hand here to remove some irrelevant bits around styles and event propagation so it's possible that typo's have crept in -- it compiles and runs in reality).

const Chats = () => {
  const [chats, setChats] = useState({ chats: [], timestamp: 0 });
  const live = useRef(true);

  const fetchChats = () => {
    if (live.current && Date.now() - chats.timestamp < 9000) return;

    fetchData(`${baseBeta}/me/chats`).then(res => {
      if (res.value.length === chats.chats.length) return;
      const chatIds = chats.chats.map(chat => chat.id);
      const newChats = res.value.filter(chat => !chatIds.includes(chat.id));

      if (newChats.length > 0) {
        setChats(c => ({ chats: [...c.chats, ...newChats], timestamp: Date.now() }));
      }
      setTimeout(fetchChats, 10000);
    });
  };

  useEffect(() => {
    fetchChats();
    return () => (live.current = false);
  }, [chats]);

  return (
    <div>
      {chats.chats.map(chat => (
        <Chat chat={chat} />
      ))}
    </div>
  );
};

The Chat component must also make some async calls for data before it is rendered.

This code works, for a second or two. I see the Chat component rendered on the screen with the correct details (chat member names, avatars, etc.), but almost before it has completed rendering I see the list elements being removed, apparently one at a time, though that could just be the way its rendered -- it could be all at once. The list collapses on the screen, showing that the chat state has been cleared out. I don't know why this is happening.

I've stepped through the code in the debugger and I can see the newChats array being populated. I can see the setChats call happen. If I put a breakpoint on that line then it is only invoked once and that's the only line that sets that particular state.

So, what's going on? I'm pretty sure React isn't broken. I've used it before without much trouble. What's changed recently is the inclusion of the refresh code. I'm suspicious that the reset is taking away the state. My understanding is that the fetchChats method will be rendered every time the chats state changes and so should see the current value of the chats state. Just in case this wasn't happening, I passed the chats state from the useEffect like this:

useEffect(() => {
    fetchChats(chats);
    return () => (live.current = false);
}, [chats]);

With the necessary changes in fetchChats to make this work as expected. I get the same result, the chats state is lost after a few seconds.

Edit

Still Broken: After @Aleks answer my useEffect now looks like this:

useEffect(() => {
    let cancel = null;
    let live = true;
    const fetchChats = () => {
      if (Date.now() - chats.timestamp < 9000) return;
      fetchData(`${baseBeta}/me/chats`).then(res => {
        if (res.value.length === chats.chats.length) return;
        const chatIds = chats.chats.map(chat => chat.id);
        const newChats = res.value.filter(chat => chat.chatType === "oneOnOne" && !chatIds.includes(chat.id));

        if (newChats.length > 0 && live) {
          setChats(c => ({ chats: [...c.chats, ...newChats], timestamp: Date.now() }));
        }

        cancel = setTimeout(fetchChats, 10000);
      });
    };
    fetchChats();
    return () => {
      live = false;
      cancel?.();
    };
}, []);

The result of this is that the chats are loaded, cleared, and loaded again, repeatedly. This is better, at least they're reloading now, whereas previously they would disappear forever. They are reloaded every 10 seconds, and cleared out almost immediately still.

Eventually, probably due to random timings in the async calls, the entries in the list are duplicated and the 2nd copy starts being removed immediately instead of the first copy.