The Setup

I have a heading component whose types look like this.

// Heading/index.d.ts
import { HTMLAttributes } from 'react';

export const HeadingType: {
  product: 'product';
  marketing: 'marketing';
};
export const HeadingLevel: {
  h1: 'h1';
  h2: 'h2';
  h3: 'h3';
  h4: 'h4';
  h5: 'h5';
  h6: 'h6';
};

export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
  as: keyof typeof HeadingLevel;
  type?: keyof typeof HeadingType;
}
export const Heading: React.FC<HeadingProps>;

Here's what the as type gets inferred as, which is what I want because that makes the intellisense work really well at the consumer side.

Inference

Component Usage

The problem is that this doesn't work if I have to generate the element in a loop using let's say, map because the actual data I wanna use may be string.

The error I am given on hovering over as is

Type '`h${number}`' is not assignable to type '"h1" | "h2" | "h3" | "h4" | "h5" | "h6"'.ts(2322)
index.d.ts(17, 3): The expected type comes from property 'as' which is declared here on type 'IntrinsicAttributes & HeadingProps & { children?: ReactNode; }'

The Question

How do I type this so both the cases work?

Notes

If you are wondering why I have an export const HeadingLevel in the index.d.ts file and simply the union type is because the actual component is written in JS, which exports two variables with the same name that look like this.