React×TypeScriptでタグを動的に生成したい

やりたい事

propsで受け取った値によってhタグを動的に作成するコンポーネントを作成しました。
levelがhタグの数値になり、h1~h6までを動的に切り替え可能にしています。

import React, { FC } from "react";

type HeadingTextProps = {
  level: number; // NOTE: HTML要素レベル
  children: React.ReactNode;
};

const HeadingText: FC<HeadingTextProps> = ({ level, children }) => {
  const Heading = `h${level}`;

  return <Heading>{children}</Heading>;
};
export default HeadingText;

この時エディタ上で<Heading>上にエラーが添付画像のようなエラーが表示されています。

今回はこのエラーの原因と、解決方法を調べていきます。

原因と解決策

エラー内容を確認するとタグとして設定したつもりの変数Headingが文字列として読み取られてしまっています。
そこで型アサーションを利用してタグとして認識できるように修正を加えます。

import React, { ElementType, FC } from "react";

type HeadingTextProps = {
  level: number; // NOTE: HTML要素レベル
  children: React.ReactNode;
};

const HeadingText: FC<HeadingTextProps> = ({ level, children }) => {
  const Heading = `h${level}` as ElementType; // 変更点

  return <Heading>{children}</Heading>;
};
export default HeadingText;

今回定義したElementTypeは、HTMLタグの文字列、React.ComponentClass、React.FCなどを受け取る事ができるようです。
これで親コンポーネントから渡されたpropsの値でhタグを動的に切り替えるコンポーネントを実装することができました。

懸念点

型アサーションで無理やり型を矯正しているのでそれがベストな選択なのかは疑問があります。
ただ今の知識では代替案が思いつかない、、、
何か別の方法あればご教授いただきたいです。