im building the chat application, im using react query useInfiniteQuery for fetching the data as user scroll to the top, im haveing problem with scrolling the bar back to previous scroll height, i tried usign state for previous scroll height random useEffects, and userefs but nothing seems to help me i was lookign all guides and turitorials on internet but cant find solution for this problem, also when i scroll top to 0 (zero) then it wont fetch any data until re use scroll again so for example if fetch page 1,2,3 and it is stuck on page four

i was expecting whenever a fetch occur to scroll back to new scroll height – previous scroll height (to the start of the new section)
` useEffect(() => {
const currentTopMessageBoxRef = topMessageBoxRef.current;

const handleScroll = async () => {
  const { scrollTop, scrollHeight } = currentTopMessageBoxRef;

  if (scrollTop < 200 && !isFetchingNextPage) {
    fetchNextChatMessagesPage();
  }
};

if (currentTopMessageBoxRef) {
  currentTopMessageBoxRef.addEventListener('scroll', handleScroll);
}

return () => {
  if (currentTopMessageBoxRef) {
    currentTopMessageBoxRef.removeEventListener('scroll', handleScroll);
  }
};

}, [fetchNextChatMessagesPage, isFetchingNextPage]);`