Infinite scrolling of the publication list

In the application that displays a list of publications, it is required to implement an infinite scrolling mechanism: when reaching the bottom of the list, new entries are automatically requested and added to the already displayed ones.

const createPosts = () => {
  return Array(10)
    .fill(null)
    .map((_, idx) => {
      return { title: `Post-${idx}`, id: Math.random() * 10000 };
    });
};

function Feed() {
  const [items, setItems] = useState<Post[]>(createPosts());

  return (
    <div className="app">
      {items.map((item) => (
        <div className="post" key={item.id}>
          {item.title}
        </div>
      ))}
    </div>
  );
}