Overriding JSX.Element in global namespace causing type errors

[cmpdc]

• three version: ^0.172.0
• @react-three/fiber version: ^8.17.12
• @react-three/drei version: ^9.120.8
• node version: v20.12.2
• npm (or yarn) version: 10.9.0

Problem description:

What happens: Element in JSX.Element is missing due to a namespace JSX override. As shown here: https://github.com/pmndrs/drei/blob/346326928346612f5d12f1f291699ce78aa0e5fd/src/core/MeshDistortMaterial.tsx#L19C1-L25C2

Why this is problematic: It affects all files importing JSX types globally and breaks React's expected typings.

Relevant code:

Snippet from my codebase:

interface ThreeJSProject {
  content: () => JSX.Element;
  name: string;
}

This causes the TypeScript error: Namespace 'global.JSX' has no exported member 'Element'. ts(2694)
The expected behavior should allow JSX.Element to be used without errors, even after extending the JSX.IntrinsicElements.

Suggested solution:

• Extend the JSX namespace rather than replacing it entirely.
• Add documentation on how to restore compatibility when using custom types.

As a stopgap of the issue, I currently have the following in my own global.d.ts that fixes the issue:

import React from "react";

declare global {
	namespace JSX {
		interface IntrinsicElements {
			distortMaterialImpl?: any;
		}

		type Element = React.ReactNode;
	}
}

[CodyJasonBennett]

This is the intended way to augment React JSX in React <19. If you are using React 19, see #2260.