How to render HTML tags embedded in JS array values

When calling data from an array from an API, some of the array values have HTML tags (title and display_name below):

    {
        "id": "https://openalex.org/W2101293576",
        "doi": "https://doi.org/10.1128/aem.02073-07",
        "title": "Differential Roles of Poly- <i>N</i> -Acetylglucosamine Surface Polysaccharide and Extracellular DNA in <i>Staphylococcus aureus</i> and <i>Staphylococcus epidermidis</i> Biofilms",
        "display_name": "Differential Roles of Poly- <i>N</i> -Acetylglucosamine Surface Polysaccharide and Extracellular DNA in <i>Staphylococcus aureus</i> and <i>Staphylococcus epidermidis</i> Biofilms"
    }

When I pass it into a React component, <h1>{props.paper.title}</h1> it obviously renders an h1 element which literally reads

"Differential Roles of Poly- <i>N</i> -Acetylglucosamine Surface Polysaccharide and Extracellular DNA in <i>Staphylococcus aureus</i>"

Is there a way I can incorporate those HTML tags into the rendering or parse them out of the code if I can't apply them to the actual text?