Use layer components in JSX and TypeScript

Description

TypeScript complains that some React components, including layer components such as GeoJsonLayer and ArcLayer, cannot be used in JSX:

'GeoJsonLayer' cannot be used as a JSX component.
  Its instance type 'GeoJsonLayer<Feature<Geometry, GeoJsonProperties>, { id: string; data: string; stroked: true; filled: true; lineWidthMinPixels: number; opacity: number; getLineColor: [...]; getFillColor: [...]; }>' is not a valid JSX element.
    Type 'GeoJsonLayer<Feature<Geometry, GeoJsonProperties>, { id: string; data: string; stroked: true; filled: true; lineWidthMinPixels: number; opacity: number; getLineColor: [...]; getFillColor: [...]; }>' is missing the following properties from type 'ElementClass': render, forceUpdate, refsts(2786)

This makes deck.gl's React flavor unusable in TypeScript projects.

Flavors

• React
• Python/Jupyter notebook
• MapboxLayer
• GoogleMapsOverlay
• CartoLayer
• DeckLayer/DeckRenderer for ArcGIS

Expected Behavior

All React components are recognized by TypeScript as such, and can be used in JSX without errors.

Steps to Reproduce

Import the typed React components as per the docs:

import { DeckGL } from "@deck.gl/react/typed";
import { ArcLayer, GeoJsonLayer } from "@deck.gl/layers/typed";

Then try to compose as per the docs. This is actually a simplified version of an official example:

  return (
    <DeckGL controller>
      <GeoJsonLayer
        id="base-map"
        data={COUNTRIES}
        stroked
        filled
        lineWidthMinPixels={2}
        opacity={0.4}
        getLineColor={[60, 60, 60]}
        getFillColor={[200, 200, 200]}
      />
      <ArcLayer
        id="arcs"
        data={AIR_PORTS}
        getSourcePosition={(f) => [-0.4531566, 51.4709959]}
        getTargetPosition={(f) => f.geometry.coordinates}
        getSourceColor={[0, 128, 200]}
        getTargetColor={[200, 0, 80]}
        getWidth={1}
      />
    </DeckGL>
  );

See CodeSandbox for a working repro: https://codesandbox.io/s/sleepy-hermann-ir2vpi?file=/src/App.tsx

Environment

• Framework version: deck.gl@8.8.11
• React: 17.0.1 (also 18)
• TypeScript: 4.6.3

Logs

No response

Start with the typed React entry points imported in the reproduction: @deck.gl/react/typed and @deck.gl/layers/typed, focusing on DeckGL, GeoJsonLayer, and ArcLayer. Reproduce the TypeScript JSX error using the linked CodeSandbox or the shown example; done means these components are accepted in JSX without the reported ElementClass error.