Why is each comment element mapping multiple items instead of only one at a time?

In my comment thread, which has a parent-child relationship (where the parent ID of a child comment is the ID of the root comment and the parent ID of the root comment is null), each object has a “replies” array that represents replies to that specific comment. However, when I try to map through and display these replies, each comment element is mapping 4 replies instead of just the replies that pertain to it. How can I fix this so that each comment element only displays the replies that are relevant to it.

I know this is verbose but this is my comments api data structure

[
{
    "avatar": "/Mrandompic_158.jpg",
    "comment": "2nd Child of Root comment 2 replying to 1st child",
    "commenterName": "Jerry Smith",
    "created": "2017-01-01T00:00:00.000Z",
    "currentUserId": "qrs",
    "draft": false,
    "draftContent": "qrs",
    "id": 6,
    "initials": "MR",
    "isEdit": false,
    "likesData": {
        "userLiked": true
    },
    "markAsResolved": "false",
    "parentId": 2,
    "showComments": true,
    "showDelete": true,
    "showEdit": true,
    "showLikes": true,
    "updated": "2017-01-01T00:00:00.000Z",
    "replies": [
        {
            "id": 1,
            "replierId": "qrs",
            "replierName": "Jerry Smith",
            "reply": "Reply to Jerry",
            "repliedToId": "nop",
            "repliedToName": "Karen Smith",
            "created": "2017-01-01T00
        }
        ]
},
{
  "avatar": "Mrandompic_158.jpg",
  "comment": "2nd Child of Root comment 2 replying to 1st child",
  "commenterName": "Karen Smith",
  "created": "2017-01-01T00:00:00.000Z",
  "currentUserId": "nop",
  "draft": false,
  "draftContent": "fjhjsgd",
  "id": 5,
  "initials": "MR",
  "isEdit": false,
  "likesData": {
    "userLiked": true
  },
  "markAsResolved": "false",
  "parentId": 2,
  "showComments": true,
  "showDelete": true,
  "showEdit": true,
  "showLikes": true,
  "updated": "2017-01-01T00:00:00.000Z",
  "replies": [
    {
      "id": 1,
      "replierId": "nop",
      "replierName": "Karen Smith",
      "reply": "Reply to Jerry",
      "repliedToId": "qrs",
      "repliedToName": "Jerry Smith",
      "created": "2017-01-01T00:00:00.000Z",
      "updated": "2017-01-01T00:00:00.000Z"
    }
  ]
},
]

{
  fullCommentSectionApiData?.commentsData.comments.map(_comment => {
    {/*@ts-expect-error */}
    if (_comment.replies.length > 0) {
      {/*@ts-expect-error */}
      return _comment.replies.map(reply => {

 
  //  user id matches.. does abc === abc ? then display
        if (reply.replierId === _comment.currentUserId) {
          return (
            <div key={reply.id}>
              {reply.replierName} replied to {reply.repliedToName}
            </div>
          );
        }
        return null;
      });
    }
  })
}

sidenote: number 2 James should not even have a replied to display.. its replies [] is empty, but it is also displaying for all of them no matter if the replies.length is 0.

What am i doing wrong?

I tried to map the replies array for each comment object and display the replierName and repliedToName in a list. However, the result was that each comment element was mapping 4 items instead of just one. I was expecting each comment element to only display one reply at a time, with the replierName and repliedToName for that specific reply.