React Kod Yardımı (İnfiniteScroll)

Merhabalar aşağıda ilettiğim kodda ürünleri infinite scroll ile göstermek istiyorum nasıl yapabilirim? ChatGpt'den iyi bir dönüş alamayınca buraya yazmak istedim. İlk kod parçası productList'in kod parçası. İkinci kod parçası ise pagination kısmının kod parçası çok denedim fakat olmadı.

Product List > Right kodu:

const Right = ({ productList }: ProductListProps) => {
  return (
    <S.Main>
      <Header productList={productList} />
      <S.Products>
        {productList.data.map((product) => (
          <Product key={product.selectedVariant.id} product={product} />
        ))}
      </S.Products>
      <Pagination productList={productList} />
    </S.Main>
  );
};
export default observer(Right);

Pagination Kısmının Kodu (Örnek olması açısından):

type Props = {
  productList: IkasProductList;
};
const ProductListPagination = ({ productList }: Props) => {
  const getPage = async (page: number) => {
    if (productList.isLoading) return;
    await productList.getPage(page);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };
  const { t } = useTranslation();
  return (
    <Pagination
      page={productList.page}
      pageCount={productList.pageCount}
      count={productList.count}
      hasNext={productList.hasNext}
      hasPrev={productList.hasPrev}
      loading={productList.isLoading}
      getPage={getPage}
    />
  );
};
export default observer(ProductListPagination);

Uppp