How would I display SharePoint list (Modern xp) comments within a control using sp/pnp and a rich text box?

Question

I'm attempting to display comments from an SP modern xp list within a control.

export const ReadListItemComments = async (listName: string, itemId: number) => { 
    return await sp.web.lists.getByTitle(listName).items.getById(itemId).comments()
};

  const getItemComments = async (item: number) => {

        Utils
            .ReadListItemComments("MyList", item)
            .then(r => {
        let returnedComments = r.map((item) => {
         return {
             author: item.author,
             createdDate: item.createdDate,
             text: item.text,
             id: item.id,
             isLikedByUser: item.isLikedByUser,
             isReply: item.isReply,
             itemId: item.itemId,
             likeCount: item.likeCount,
             listId: item.listId,
           }
          })
        console.log(returnedComments);
      })
    };

I can return the properties like text etc. But how would I display the full conversation with author, time/date etc. in an editable text box so a user can add and delete comments. I know it's not currently possible to edit comments.