如何在仍然呈现html标记

Question

我有一个包含HTML标签的字符串：

<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed 
do eiusmod tempor ut labore et dolore magna aliqua. 
<strong>Duis</strong> aute irure dolor in <a 
href="https://example.com">Link to replace with React component</a>.</p>
<p>Next paragraph</p>

我想用React组件替换所有<a>标签，然后在我的渲染函数中渲染字符串。同时仍然呈现html标记，例如<p>，<strong>等。我发现这个How to replace parts of a string with a component?替换了字符串，但没有像其应该那样呈现其他html标签。并且我不能使用dangerouslySetInnerHTML，因为我在替换字符串后有一个对象（包含React组件）。替换字符串后想要渲染的对象：

$$typeof: Symbol(react.element)
{
  "type": "span",
  "key": null,
  "ref": null,
  "props": {
    "children": [
      "<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed 
do eiusmod tempor ut labore et dolore magna aliqua. 
<strong>Duis</strong> aute irure dolor in <a 
href="https://example.com">Link to replace with React component</a>.</p>",
  {
    "key": "1",
    "ref": null,
    "props": {},
    "_owner": null,
    "_store": {}
  },
  "</p>
  <p>Next paragraph</p>\n"
]
},
  "_owner": null,
  "_store": {}
}

如何渲染之前的html标记和字符串中的新组件？