I want to implement a new JSX interface to customize the behavior.

I use the following tsconfig.json

{
    "compilerOptions": {
        "lib": ["es2015", "dom"],
        "jsx": "react",
        "jsxFactory": "createDOMElement"
    },
    "include": ["./src/**/*"]
}

And this is the Main.tsx:

function createDOMElement(tagName: string | Function, props: any, ...children: any[]) {
    if (typeof tagName === 'function') {
        return tagName(props);
    }
    console.log(tagName, props, children);
    return tagName
}

function Button(data: { text: string }) {
    const button = (
        <button>Click me!</button>
    );
    console.log(button);
    return 'OK - from button'
}

export function Main() {
    const el = (
        <Button id="pippo" />
    );

    console.log(el)

    return 'OK - from Main'
}

When run in the browser, I see in the console log:

button null ['Click me!']
Main.tsx:14 button
Main.tsx:23 OK - from button

So, it works as expected.
VSCode is unhappy about the “id” passed to Button.
Here is the error:

Type '{ id: string; }' is not assignable to type '{ text: string; }'.
  Property 'id' does not exist on type '{ text: string; }'.ts(2322)
(property) id: string

Why does this happen? How can I fix it?