preact: [typescript] React.ReactElement type is not compatible with Preact and prevents interoperability with React

There is a type mismatch between React.ReactElement and preact.VNode that prevents usage of typescript/react code with typescript/preact.

While the code below compiles and works without an issue, Typescript typechecking fails.

Reproduction

import type React from 'react'
import { FunctionalComponent, h } from 'preact'

const ReactFCInterlop: React.FC = () => {
    return <span>hello</span>
}

const Home: FunctionalComponent = () => {
    return (
        <div>
            <ReactFCInterlop /> // this fails to typecheck
        </div>
    )
}

export default Home

This results in the following typescript error:

$ tsc
src/routes/home/index.tsx:11:14 - error TS2786: 'ReactFCInterlop' cannot be used as a JSX component.
  Its return type 'ReactElement<any, any> | null' is not a valid JSX element.
    Type 'ReactElement<any, any>' is missing the following properties from type 'Element': nodeName, attributes, children

11             <ReactFCInterlop />
                ~~~~~~~~~~~~~~~

---

Typescript config:

$ tsc --showConfig
{
    "compilerOptions": {
        "skipLibCheck": true,
        "target": "es5",
        "module": "esnext",
        "allowJs": true,
        "jsx": "preserve",
        "jsxFactory": "h",
        "noEmit": true,
        "strict": true,
        "moduleResolution": "node",
        "esModuleInterop": true
    },
    "files": [
        "./src/components/app.tsx",
        "./src/components/header/index.tsx",
        "./src/routes/home/index.tsx",
        "./src/routes/notfound/index.tsx",
        "./src/routes/profile/index.tsx",
        "./src/tests/header.test.tsx",
        "./src/types.d.ts",
        "./src/components/header/style.css.d.ts",
        "./src/routes/home/style.css.d.ts",
        "./src/routes/notfound/style.css.d.ts",
        "./src/routes/profile/style.css.d.ts",
        "./src/tests/declarations.d.ts"
    ],
    "include": [
        "src/**/*.tsx",
        "src/**/*.ts"
    ]
}

Deps:

$ npm ls --depth 0 | grep preact
├── enzyme-adapter-preact-pure@2.2.3
├── jest-preset-preact@4.0.2
├── preact@10.4.8
├── preact-cli@3.0.1
├── preact-jsx-chai@3.0.0
├── preact-markup@2.0.0
├── preact-render-to-string@5.1.10
├── preact-router@3.2.1

Tested with Typescript: 4.0.2 / 3.9.7

Expected Behavior

Preact should be able to interlope with components that use typescript and @types/react. There a lot of components like that.

Workaround

This is a very dumb workaround, but it works:

// src/types.d.ts
import React from 'react'

declare global {
    namespace React {
        interface ReactElement {
            nodeName: any
            attributes: any
            children: any
        }
    }
}