Estoy construyendo un sitio web de reacción. Como parte del sitio, tengo tarjetas que se procesan utilizando una función de mapa JS. Se parece a esto:

 return ( <div className="cards"> {HomeCard.map((item) => ( <Card image={item.image} heading={item.heading} text={item.text} /> ))} </div> )

Esto obtiene datos de otro archivo que contiene este objeto:

 const homeCardsText = [ { id: 1, image: web_design, heading: "Web Design", text: "<strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Maecenas leo arcu, sagittis eget varius vel, fringilla nec metus. Nullam ultrices felis nec fermentum tincidunt. Maecenas tincidunt commodo ante a dapibus" }, { id: 2, image: web_dev, heading: "Web Development", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas leo arcu, sagittis eget varius vel, fringilla nec metus. Nullam ultrices felis nec fermentum tincidunt. Maecenas tincidunt commodo ante a dapibus." }, { id: 3, image: web_accessibility, heading: "Web Accessibility", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas leo arcu, sagittis eget varius vel, fringilla nec metus. Nullam ultrices felis nec fermentum tincidunt. Maecenas tincidunt commodo ante a dapibus." }, ]; export default homeCardsText;

Tenga en cuenta muy específicamente en id: 1 que hay etiquetas HTML. Cuando esto se representa en la interfaz, el HTML se desinfecta y se representa como texto sin formato. ¿Cómo consigo que esto se represente como HTML?