TypeScript Error: 'MentionsInput' and 'Mention' Components Not Compatible as JSX Elements

[haslam790]

Steps to reproduce:

1. Set up a TypeScript React project with the MentionsInput and Mention components.
2. Attempt to use the MentionsInput and Mention components within a .tsx file.
3. Compile the project using tsc or run the app.
4. Observe the error in the terminal/logs.

Expected behaviour:
MentionsInput and Mention should render without any TypeScript errors.
Observed behaviour:
TypeScript throws the following errors:

Error TS2786: 'MentionsInput' cannot be used as a JSX component.

Explanation: Its type 'MentionsInputClass' is not a valid JSX element type.
Details: Type 'ComponentClass<MentionsInputProps, any>' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'. Property 'refs' is missing in type 'Component<MentionsInputProps, any, any>' but required in type 'Component<any, any, any>'.
Error TS2786: 'Mention' cannot be used as a JSX component.

Explanation: Its type `'FC' is not a valid JSX element type.
Details: Type 'FunctionComponent' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Workaround:
No workaround identified as of now.