react-three-fiber typings break React typings

[lukaselmer]

The typings in https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/three-types.ts seem to break the React typings.

Example to reproduce:

MuiTestButton.tsx:

import { Button } from '@mui/material'
import type { AccumulativeShadowsProps } from '@react-three/drei'

export function MuiTestButton() {
  return <Button onClick={e => console.log(e)}>Hello</Button>
}

As soon as I remove the import:

import { Button } from '@mui/material'
// import type { AccumulativeShadowsProps } from '@react-three/drei'

export function MuiTestButton() {
  return <Button onClick={e => console.log(e)}>Hello</Button>
}

I'm not sure, but I think the issue is this code

declare global {
    namespace JSX {
        interface IntrinsicElements extends ThreeElements {
        }
    }
}

Some ThreeElements have an attribute [x: string]: any. This then breaks the React typings.

The normal ThreeElement looks like this:

This element is broken (probably because of [x: string]: any 🤔 ):

This here seems to be the root cause (THREE.TubeBufferGeometry is any):

There seem to be more elements which end up with [x: string]: any, and I think these then break the React typings. Any suggestions / workarounds are welcome.