infinite scroll

const WishList = () => {
  const [productList, setProductList] = useState<WishListProductResponse>();
  const [pagination, setPagination] = useState({
    page: 1,
    limit: 4,
  });

  const hasMore =
    typeof productList?.totalPages === "number"
      ? productList.totalPages !== pagination.page
      : false;

  const fetchNext = () => {
    setPagination({
      ...pagination,
      page: pagination.page + 1,
    });
  };

 useEffect(() => {
    const loadWishList = async () => {
      const result = await callAPIWithToken.get(
        "/api/merchant/products/favorite/",
        {
          params: {
            limit: pagination.limit,
            page: pagination.page,
          },
        }
      );

      if (result.data.success) {
        if (!productList?.data) {
          setProductList(result.data);
        } else {
          setProductList({
            ...result.data,
            data: [...productList.data, ...result.data.data],
          });
        }
      }
    };
    loadWishList();
  }, [pagination.page]);


 return (
    <>
        <>
        <InfiniteScroll
          dataLength={productList?.totalItems}
          next={fetchNext}
          hasMore={hasMore}
          height="100%"
          loader={
            <LinearProgress
              style={{
                marginBottom: "20px",
                width: "calc(100% - 16px)",
              }}
            />
          }
        >
          <Box mb={4}>
            <Grid container spacing={2}>
              {productList?.data.map((item, index) => (
               ....
              ))}
            </Grid>
          </Box>
        </InfiniteScroll>
      </>
    </>
  );
};

export default WishList;

const WishList = () => {
  const [productList, setProductList] = useState<WishListProductResponse>();
  const [pagination, setPagination] = useState({
    page: 1,
    limit: 4,
  });

  const hasMore =
    typeof productList?.totalPages === "number"
      ? productList.totalPages !== pagination.page
      : false;

  const fetchNext = () => {
    setPagination({
      ...pagination,
      page: pagination.page + 1,
    });
  };

 useEffect(() => {
    const loadWishList = async () => {
      const result = await callAPIWithToken.get(
        "/api/merchant/products/favorite/",
        {
          params: {
            limit: pagination.limit,
            page: pagination.page,
          },
        }
      );

      if (result.data.success) {
        if (!productList?.data) {
          setProductList(result.data);
        } else {
          setProductList({
            ...result.data,
            data: [...productList.data, ...result.data.data],
          });
        }
      }
    };
    loadWishList();
  }, [pagination.page]);


 return (
    <>
        <>
        <InfiniteScroll
          dataLength={productList?.totalItems}
          next={fetchNext}
          hasMore={hasMore}
          height="100%"
          loader={
            <LinearProgress
              style={{
                marginBottom: "20px",
                width: "calc(100% - 16px)",
              }}
            />
          }
        >
          <Box mb={4}>
            <Grid container spacing={2}>
              {productList?.data.map((item, index) => (
               ....
              ))}
            </Grid>
          </Box>
        </InfiniteScroll>
      </>
    </>
  );
};

export default WishList;