Lazy Load / Infinite Scroll Container

const [items, setItems] = React.useState<string[]>([]);
const [isPending, setIsPending] = React.useState(false);
const [itemsCount, setItemsCount] = React.useState<number | null | undefined>(
  null,
);

const loadMore = React.useCallback(() => {
  setIsPending(true);
  setTimeout(() => {
    setItems((prev) => [...prev, ...Array(10).fill('item')]);
    setItemsCount(items.length);
    setIsPending(false);
  }, 1000);
}, []);

return (
  <ContainerInfiniteScroll
    items={items}
    isPending={isPending}
    itemsCount={itemsCount}
    loadMore={loadMore}
  >
    {items.map((item, index) => (
      <div key={index}>{item}</div>
    ))}
  </ContainerInfiniteScroll>
);