How can I build this kind of UI, from AWS Comprehend Medical?

Question

I'm using the AWS machine learning service Comprehend Medical to analyse clinical texts and extract data.

Some context info (skippable maybe):

This is the type of input:

Pt is 40yo mother, highschool teacher 
HPI : Sleeping trouble on present dosage of Clonidine. Severe Rash  on face and leg, slightly itchy  
Meds : Vyvanse 50 mgs po at breakfast daily, 
            Clonidine 0.2 mgs -- 1 and 1 / 2 tabs po qhs 
HEENT : Boggy inferior turbinates, No oropharyngeal lesion 
Lungs : clear 
Heart : Regular rhythm 
Skin :  Mild erythematous eruption to hairline 

Follow-up as scheduled

This is the kind of output I get from AWS:

{
    "Entities": [
        {
            "Id": 0,
            "BeginOffset": 6,
            "EndOffset": 10,
            "Score": 0.9984116554260254,
            "Text": "40yo",
            "Category": "PROTECTED_HEALTH_INFORMATION",
            "Type": "AGE",
            "Traits": []
        },
        {
            "Id": 1,
            "BeginOffset": 19,
            "EndOffset": 37,
            "Score": 0.28823626041412354,
            "Text": "highschool teacher",
            "Category": "PROTECTED_HEALTH_INFORMATION",
            "Type": "PROFESSION",
            "Traits": []
        },
         ...

Then I would like to render this kind of UI, the same way AWS does in their console to represent Comprehend medical outputs (see the image) : AWS Console Comprehend Medical output representation

I managed to tag the text. But I have no idea in how to make the tagged arrows: represent those dependecies between html elements.

I have tried some react libraries like Taggy(only do tagging) and explored some other solutions like Spacey (will require SSR and not even the same output of tags + tagged arrows ),

Anyone could suggest an approach to do this kind of tagged arrows between those html components?

Thank you ma people.