React dynamically set custom tags

Question

Rather than having to create a component per custom header type, I would like to do so dynamically.

const HEADERS = {
   'header-one': 'h1',
   'header-two': 'h2',
   'header-three': 'h3',
   'header-four': 'h4',
   'header-five': 'h5',
};

_

let tag = HEADERS[type] || 'span';
return (
  <{tag} id={id}>
      {props.children}
  </{tag}>
);

Answer 1

Ok after reading this: Dynamic tag name in jsx and React

I was able to figure it out that it needs to be a capital (NFI why?)

const Tag = HEADERS[type] || 'span';
return (
    <Tag id={id}>
        {props.children}
    </Tag>
);

Is now working. Still open to better answers or an explanation as too why it needs to be capital..