Dynamic component type with JSX

dynamic-header.tsx

export default function HeaderLevel({
  level,
  children,
  ...props
}: { level: number } & ChildrenProps & ClassProps): JSX.Element {
  const classes = classOf("HeaderLevel", props.class);
  const Header = level > 0 && level <= 6 ? `h${level}` : 'div'
  return <Header class={classes}>{children}</Header>;
}