Как сопоставить карту в React

Я пытаюсь сопоставить родительские комментарии, а затем в функции сопоставления я хочу сопоставить соответствующие вложенные дочерние комментарии, глубина которых составляет всего один уровень.

По какой-то причине, когда я пытаюсь это сделать, все вложенные дочерние комментарии отображаются ниже первого родительского комментария.

У меня есть два массива:

parentComments: [
{
  id: "1",
  comment: "First parent comment"
},
{
  id: "2",
  comment: "Second parent comment"
},
]

childComments: [
{
  id: "3",
  comment: "First child comment",
  parentCommentId: "1"
},
{
  id: "4",
  comment: "Second child comment",
  parentCommentId: "2"
},
]

Вот код, который я пытаюсь:

{parentComments.map((parentComment) => (
    <ul>
            {parentComment.comment}
            <li>
              {" "}
              {childComments.map((childComment) => (
                <>
                  {childComments.find(
                    (e) => e.parent_comment_id === comment.id
                  )
                    ? childComment.comment
                    : ""}
                </>
              ))}
            </li>
          </ul>
))}

Я ожидаю, что каждый родительский комментарий сопоставляется, если дочерний комментарий parentCommentId равен идентификатору сопоставляемого родительского комментария, он будет отображать дочерний комментарий под ним.