React type errors rendering ComponentType

[nickofthyme]

In a few places throughout charts we render custom components on the type ComponentType<Props>. Like the LegendColorPicker to define a custom color picker.

elastic-charts/packages/charts/src/specs/settings.tsx

Lines 340 to 341 in a602838

	/** @public */
	export type LegendColorPicker = ComponentType<LegendColorPickerProps>;

Lately I've started seeing error where typescript is complaining about these components with the following error...

'ColorPicker' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<LegendColorPickerProps, any, any> | null' is not a valid JSX element.
    Type 'Component<LegendColorPickerProps, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<LegendColorPickerProps, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/nickpartridge/Documents/repos/elastic-charts/docs/node_modules/@types/react/index").ReactNode'.ts(2786)

If I were to use the renderWithProps utility like below, the error goes away.

return renderWithProps(ColorPicker, {
  anchor: this.colorRef.current,
  color,
  onClose: handleClose,
  onChange: handleChange,
  seriesIdentifiers,
});

I'm not sure if this is a typing issue or what but the functionality is unaffected. But we should look into this to resolve the type errors.

These errors do not appear as type errors in main but do appear when you add the exact @types/react to the top-level package.json. I think they always show in the IDE.

See example build errors at https://buildkite.com/elastic/datavis-ci/builds/3508#018ec3c1-2ccd-405a-834b-3a7ce5879bbb