Array of components inside array of components - ReactJS

I am making a social media app. In my post module i have multiple (array) posts and inside each post there is an array of comments which is loaded through another API using the postId. When I am trying to load my comments in each individual post, they render in every post which exist. I want each post to have their own comments.

This is my post-list component where i render all my posts.

{postData && postData.map((post,i)=>{
  return(
         <Fragment key={`${nanoid()}_${i}`}>
           <Post postData={post}/>
         </Fragment>
        )
})}

This is the comments section from my post component where individual posts are rendered. (I am mapping the comments twice here because I get one comment initially inside posts object if it exists, rest of the comments can be loaded through the load more button)

<div className={styles.post__comments}>
                <AddComment postId={postData._id} type="comment"/>

                {postData.comment &&
                    <div className={styles.comment__list}>
                        {postData.comment.map((comment,i)=>{
                            return(
                                <Fragment key={`${nanoid()}_${i}_initial`}>
                                    <Comments commentData={comment}/>
                                </Fragment>
                            )
                        })}
                        {!!commentsData?.length > 0 && commentsData.map((comment,i)=>{
                            return(
                                <Fragment key={`${nanoid()}_${i}`}>
                                    <Comments commentData={comment}/>
                                </Fragment>
                            )
                        })}
                        {isCommentLoading === HTTP_STATUS.PENDING ? <CommentsLoader/> : (
                            <>
                                {/*last page should be greater than the current page + initial value should be true*/}
                                {(commentsLastPage >= commentPagination || isCommentPagination) && <button className={styles.load__comments} onClick={()=>loadMoreComments(postData._id)}>Load More
                                    Comments...</button>}
                            </>
                        )}
                    </div>
                }

This is the loadMoreComments function which call the comments from the API.

const loadMoreComments = (postId) => {
    dispatch(handleLoadMoreComment({postId:postId,page:commentPagination}))
        .unwrap()
        .then(()=>{
            setCommentPagination((prev)=>prev+1)
        })
        .finally(()=>{
            setIsCommentPagination(false)
        })
}

Then there's individual comments component where comments are rendered.

<div className={styles.comment__wrapper}>
            <UserProfilePicture isLink profilePic={commentData.profilePicture} link={commentData.userId}/>
            <div className={styles.comment}>
                <div className={styles.comment__user__info}>
                    <p>test name</p>
                    <span>{commentData.likes.length} LIKES</span>
                </div>
                <div className={styles.comment__content}>
                    <LongTexts longText={commentData.comment} showTextLength={250}/>
                </div>
                <div className={styles.comment__interact}>
                    <button className={styles.reply__button} onClick={replyToComment}>Reply</button>
                    <LikeButton defaultValue={commentData.likes.includes(userData?._id)} loader={isReactingToComment === HTTP_STATUS.PENDING} clickHandler={reactToComment} postType="comment" id="abc"/>
                </div>
            </div>
        </div>

Posts User Interface:

https://i.stack.imgur.com/gQddw.jpg