Set HTML element from props in React component?

Question

I need to set the HTML heading level based on props in a React component:

const Typography: React.FC<Props> = ({
  level
  children,
}) => {
  switch (semanticLevel) {
    case 1:
      return <h1>{children}</h1>;
    case 2:
      return <h2>{children}</h2>;
    case 3:
      return <h3>{children}</h3>;
  }
};

The code above works but feels messy. Is there a way to use the level prop directly when setting the HTML? So something like:

const Typography: React.FC<Props> = ({
  level
  children,
}) => {
   return <h`${level}`>{children}</`${level}`>;
};