Вывод аргумента типа неправильно ограничивает тип

Question

В машинописном тексте с реакцией мне нравится создавать компонент, который в зависимости от свойства с именем tagName допускает только соответствующие дополнительные свойства.

Например: <SafeHTML tagName="div" href="https://www.google.com" /> должен выдавать ошибку, потому что href не является свойством тега div. Однако <SafeHTML tagName="a" href="https://www.google.com" /> должен работать.

С приведенным ниже кодом я заставил его работать, но только если указать аргумент типа. (<SafeHTML<'div'> tagName="div" href="https://www.google.com" />)

Мой тестовый код:

import React from 'react'

type PropsArg<T> = T extends React.DetailedHTMLFactory<infer U, infer T2> ? U : never

interface SafeHTMLProps<TAGNAME>{
  childHtml: string
  tagName: TAGNAME
}

function checkHTML(h: string ) {
    return h
}

export class SafeHTML<TAGNAME extends keyof React.ReactHTML> extends React.PureComponent<SafeHTMLProps<TAGNAME> & PropsArg<React.ReactHTML[TAGNAME]>> {

    render() {

        return React.createElement(this.props.tagName, {
            ...this.props,
            dangerouslySetInnerHTML: { __html: checkHTML(this.props.childHtml) },
        })
    }
}


function testRenderSyntax() {
    return <SafeHTML tagName='a' childHtml="test" href='2'/>
}


function testRenderSyntax2() {
    // should give an error because href is not allowed for div
    return <SafeHTML childHtml="test" tagName='div' href='s'/>
}


function testRenderSyntax3() {
    // here it gives the error correctly
    return <SafeHTML<'div'> childHtml="test" tagName='div' href='s'/>
}

Кажется, он не работает правильно с выводом аргумента, но он работает с явным аргументом типа. Есть ли способ заставить его работать с автоматическим выводом типов c или любыми другими идеями, как реализовать SafeHTML типобезопасность?