ReactElementをHTMLElementで包む方法

ReactElementに対応していないライブラリを使うためにHTMLElementに変換したいので下記の関数を作成しました。

import { renderToStaticMarkup } from "react-dom/server";

function wrapHTMLElement(reactElement: React.ReactElement): HTMLElement {
  const container = document.createElement("div");
  const staticElement = renderToStaticMarkup(reactElement);
  container.innerHTML = staticElement;
  return container;
}

1. 最初に新しい<div>要素を作成して、それをコンテナとして利用します。
2. renderToStaticMarkupを使用して、与えられたReactElementを静的なHTMLマークアップに変換します。これにより、React要素が持つ情報が純粋なHTML文字列として取得されます。
3. コンテナのinnerHTMLプロパティに、変換された静的なマークアップを設定します。これにより、ReactElementが包まれた形でコンテナに格納されます。
4. 最後に、containerを返却します。これにより、wrapHTMLElement 関数を呼び出した箇所で、ReactElementがHTMLElementに変換されたものを利用できます。