Javascript 如何使用 React 在移动设备和桌面上创建帖子列表的无限滚动

如何使用REACT/TYPESCRIPT创建无限卷轴？ 我想首先显示一个10个帖子的列表，然后当用户查看第10个帖子时，屏幕上应该加载另一个阶段的10. 请帮忙做一个代码演示.

这是我目前所实现的，目前正在显示所有帖子

import PostStyles from "../../../components/ui/createPost/_createpost.module.scss"
import CreatePost from "../createPost/createPost"
import Post from "../post/post"
import Modal from "../createPost/Modal"
import { postType } from "../../../util/types"


type mainSectionType = {
  posts:postType[]
}

type postType = {
    _id: string;
    creator: {
      id: string,
      name: string,
      profilePicture: string
    },
    createdAt: string,
    photos: string[],
    post_description: string,
    time_posted: string,
  }

const MainSection = ({posts}:mainSectionType) => {


  return (
    <>
      <Modal />
      <div className={PostStyles.post__create_postContainer}>
        <CreatePost />
      </div>
      <div className={PostStyles.post__posts_container}>
         {
          posts.map((post, index) => {
            return <Post
              key={index}
              post_desc={post.post_description}
              postID={post._id}
              username={post.creator.name}
              timeposted={post.time_posted}
              userImg={post.creator.profilePicture}
              photos={post.photos}
            />
          })
        } 
      </div>

    </>
  )
}

export default MainSection