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

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

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

javascript
// 疑似コードです
import reactStringReplace from "react-string-replace"

const original_string = "キーワード抽出APIはリクエストで送られたタイトルと本文からなる文書から、人名や地名、組織など文書を特徴づけるキーワードを抽出します。キーワードはタイトルや本文における出現位置や、文書中における出現回数、固有表現の種別などによってスコア付けされます。"

const react_string = reactStringReplace(react_string, "キーワード", (match, i) => {
  return(
     <a href={"https://www.bing.com/search?q=" + match}>{match}</a>
  )
})

const hogeComponent = () => {
  return(
     <>
       {react_string}
     </>
  )
}

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

React で ReactNode を置換する場合

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

javascript
// 疑似コードです
import React, {useEffect, useState} from "react"
import reactStringReplace from "react-string-replace"
import {renderToStaticMarkup} from "react-dom/server"

const hogeComponent = ({children}) => {

  const [content, set_content] = useState<string>("")

  const mouseEnterEvent = (e) => {
    /* popup を出す 省略 */
  }

  const mouseLeaveEvent = (e) => {
    /* popup を消す 省略 */
  }

  useEffect(() => {
    const children_string_raw = renderToStaticMarkup(React.createElement("div", {children: children}))
    const hoge_url = "hogehoge", hoge_params = {body: "hoge"}
    const response = await axios.post(hoge_url, hoge_params)
    const keywords = response.data.keywords
    let children_string;
    keywords.forEach((keyword) => {
      children_string = reactStringReplace(children_string_raw, keyword, (match, i) => {
      return(
         <a
            href={"https://www.bing.com/search?q=" + match}
            onMouseEnter={mouseEnterEvent}
            onMouseLeave={mouseLeaveEvent}
         >
           {match}
         </a>
      )
    })
  })
  })

  return(
     <>
       {content}
     </>
  )
}

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

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

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