Need to persist data when click go back button(infinite scroll)

[yhan0704]

Hello
This function is a search function with infinite scroll.
Everything is working well as I expected, but when I click the Link button(detail page) on page five and go back button, I see only 1 page of data and the scroll is at the bottom of 1 page. After that, I cannot scroll down anymore. I found that I needed to persist on the previous page.
I tried to use an atom, but I was not sure that was the answer.

Does anyone have a better idea of this?

export default function Search() {
  const data = useLoaderData<typeof loader>();
  const location = useLocation();

  return <SearchPage key={location.key} data={data} />;
}

SearchPage.tsx

  const { nowPlayingMovies, searchQuery } = data;
  const fetcher = useFetcher<FetcherMovies>();
  const [items, setItems] = useState(nowPlayingMovies);
  const [page, setPage] = useState(1);

  useEffect(() => {
    if (!fetcher.data || fetcher.state === "loading") {
      return;
    }

    if (fetcher.data) {
      const newItems = fetcher.data.nowPlayingMovies.results;
      setItems((prevItems) => ({
        ...prevItems,
        results: [...prevItems.results, ...newItems],
      }));
    }
  }, [fetcher.data, fetcher.state]);

  const loadMore = () => {
    const nextPage = page + 1;
    setPage(nextPage);
    fetcher.load(`?query=${searchQuery}&page=${nextPage}`);
  };