BaseHTMLComponent.ts

const BaseHTMLElement = <T extends keyof HTMLElementTagNameMap>(
  htmlElement: T,
  injectClasses = ""
): ((props: React.HTMLProps<unknown>) => React.ReactElement) => {
  const Component = function (props: React.HTMLProps<unknown>) {
    const { children, className, ...rest } = props;
    return React.createElement(
      htmlElement,
      {
        className: `${className} max-w-4xl mx-auto ${injectClasses}`,
        ...rest,
      },
      children
    );
  };
  Component.displayName = `MDXCustomHTML<${htmlElement}>`;
  return Component;
};