"class X extends React.Component" is not a valid JSX element

Question

I am using a library component which is declared this way:

import React, { ReactNode } from 'react';
export declare class Splide extends React.Component<SplideProps> {

When trying to use it in my projects, typescript throws the following error:

TS2786: 'Splide' cannot be used as a JSX component. Its instance type 'Splide' is not a valid JSX element. Type 'Splide' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.

If I ignore the error it seems the component works properly once deployed, so I'm guessing it's a typescript issue

I could confirm that modifying the library to be written this way fixed the issue:

import React, { ReactNode, Component } from 'react';
export declare class Splide extends Component<SplideProps> {

as does this:

import * as React from 'react';
export declare class Splide extends React.Component<SplideProps> {

However I don't really want to keep a modified version of the library locally, and since nobody else has mentioned that issue it's probably a problem with my setup. I could just @ts-ignore every usage of that component or create a middleware component that extends and fixes that component but again, not great practices.

Some additional points I checked:

• I saw mention of using resolutions in package.json to enforce @types/react and react versions, but it didn't work
• I double checked inside react, and the class Component is inside the namespace React so as far as I can tell React.Component should work