ReactNode (children) で文字列を置換 (String Replace) したい場合

[前提] React で文字列を置換する場合

react-string-replace というライブラリーを使って、
https://github.com/iansinnott/react-string-replace

javascript
1// 疑似コードです
2import reactStringReplace from "react-string-replace"
3
4const original_string = "キーワード抽出APIはリクエストで送られたタイトルと本文からなる文書から、人名や地名、組織など文書を特徴づけるキーワードを抽出します。キーワードはタイトルや本文における出現位置や、文書中における出現回数、固有表現の種別などによってスコア付けされます。"
5
6const react_string = reactStringReplace(react_string, "キーワード", (match, i) => {
7  return(
8     <a href={"https://www.bing.com/search?q=" + match}>{match}</a>
9  )
10})
11
12const hogeComponent = () => {
13  return(
14     <>
15       {react_string}
16     </>
17  )
18}
19

みたいな感じで、文字列からマッチした部分を置換できます。

React で ReactNode を置換する場合

ただ、react-string-replace だと、文字列のみしか置換できず、ReactNode を置換できないので、children のような ReactNode を react-string-replace する場合は、

javascript
1// 疑似コードです
2import React, {useEffect, useState} from "react"
3import reactStringReplace from "react-string-replace"
4import {renderToStaticMarkup} from "react-dom/server"
5
6const hogeComponent = ({children}) => {
7
8  const [content, set_content] = useState<string>("")
9
10  const mouseEnterEvent = (e) => {
11    /* popup を出す 省略 */
12  }
13
14  const mouseLeaveEvent = (e) => {
15    /* popup を消す 省略 */
16  }
17
18  useEffect(() => {
19    const children_string_raw = renderToStaticMarkup(React.createElement("div", {children: children}))
20    const hoge_url = "hogehoge", hoge_params = {body: "hoge"}
21    const response = await axios.post(hoge_url, hoge_params)
22    const keywords = response.data.keywords
23    let children_string;
24    keywords.forEach((keyword) => {
25      children_string = reactStringReplace(children_string_raw, keyword, (match, i) => {
26      return(
27         <a
28            href={"https://www.bing.com/search?q=" + match}
29            onMouseEnter={mouseEnterEvent}
30            onMouseLeave={mouseLeaveEvent}
31         >
32           {match}
33         </a>
34      )
35    })
36  })
37  })
38
39  return(
40     <>
41       {content}
42     </>
43  )
44}

のように、一度 renderToStaticMarkup で ReactNode を生の文字列に変えてから置換を行ってみました。

ただ結果は、content を見ると children の HTML が反映されないことが起こってしまいました (children 内の<a>タグがそのまま表示されるなど)。
また、最終段階でもう一度 renderToStaticMarkup で children_string を文字列に変えてから、dangerouslySetInnerHTML もしてみたのですが、それだと mouseEnter と mouseLeave のイベントが消えてしまいました。

では、ReactNode を置換する場合は、どのようにすればいいんでしょうか？ ReactNode を探索するなど方法があったら、ご教授お願いできると嬉しいです。