React render HTML from Object [duplicate]

I am building a react website. As part of the site, I have a cards which are rendered using a JS map function. It looks like this:

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

This gets data from another file which contains this object:

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;

Note very specifically in id:1 there are HTML tags. When this is rendered to the front end, the HTML becomes sanitized and renders as plaintext. How do I get this to render as HTML?