I installed inifinite-scroller library, but inifinite-scroller component doesnt work as intended,after first fetching, he is trowing error “Rendered more hooks than during the previous render”

The problem is in setpage hook, without it scroller work fine, but without all code except setpage app work fine too

const loadNewProducts = async () => {
    try {
      const res = await fetch(
        `https://skillfactory-task.detmir.team/products?&page=${page}&limit=15`,
        { credentials: "include" }
      );
      const data = await res.json();

      setPosts((prevPosts) => {
        const newPosts = data.data.filter(
          (item) => !prevPosts.some((post) => post.id === item.id)
        );
        return [...prevPosts, ...newPosts];
      });
      setPage(page + 1);
    } catch (err) {
      console.error(err.message);
    }
  };
...

<InfiniteScroll
        pageStart={0}
        loadMore={async () => {
          await loadNewProducts();
        }}
        hasMore={true}
        loader=""
      >
        {<h4 className={css.Loading}>Загрузка...</h4>}
      </InfiniteScroll>