React Functional component lazy loading implementation

Question

We have a simple React application where the parent component (ShopItem) renders multiple child components (CommentCard) in a loop.

const ShopItem = ({ item }) => {
    const [comments, setComments] = useState(item.comments)

    return (
        <div>
            <div className="item_title">
                item.title
            </div>
            <div className="item_comments">
                {comments.map((comment) => {
                    return (
                        <CommentCard
                            commentId={commentId}
                        />
                    )
                })}
            </div>
        </div>
    )
}

CommentCard component then internally calls API to fetch comment information and then render it on screen. Here is the structure of the item we receive in ShopItem props

{
    title: "Bucket"
    price: 90
    comments: [
        8993,
        8992,
        8991,
        8990,
        ..
        ..
        ..
    ]
}

We want to apply lazy loading for the Comment section. For example, in starting it should render the first 5 CommentCards only and when the user starts scrolling it should render the next five and so on. As we already have a list of all comments posted on items (in form of the array), we do not need to fetch comment ids from the server, we just need to manage the list we already received as props.

We tried to use React.lazy and React.suspense but those are not fulfilling our requirements. I am not looking for a fully functional solution, I am looking for an approach here.