shaderMaterial in Typescript + React

[SrPumpkin]

Typescript gives an error "TS2339: Property shaderExemple does not exist on type JSX.IntrinsicElements" when i using a shader. Please tell me how to fix this error?

const ShaderExemple = shaderMaterial(
    {
        u_time: 0.0,
        u_tex: new THREE.Texture()
    },
    vertex,
    fragment
)

extend({ ShaderExemple })

export default function Item() {
   ...
    return(
        <mesh position={[0, 0, 0]} >
            <planeGeometry args={scale} />
            <shaderExemple ref={shader} /> // TS2339: Property shaderExemple does not exist on type JSX.IntrinsicElements
        </mesh>
    )
}

[SrPumpkin]

This problem can be resolved as follows.

Our component:

const DreiShaderMaterial = shaderMaterial(
    {
        u_time: 0.0,
        u_tex: new THREE.Texture()
    },
    vertex,
    fragment
)

extend({ DreiShaderMaterial })

You just need to add this code to any "***.d.ts" file:

import {DreiShaderMaterial} from "./components/Item.tsx";

declare global {
    namespace JSX {
        interface IntrinsicElements {
            dreiShaderMaterial: ReactThreeFiber.Node<typeof DreiShaderMaterial & JSX.IntrinsicElements['dreiShaderMaterial'], typeof DreiShaderMaterial>
        }
    }
}