'ReactPlayer' cannot be used as a JSX component

Current Behavior

• I receive the following error when trying to use Reac-player: JSX element class does not support attributes because it does not have a 'props' property.

Expected Behavior

I followed the instructions exactly using the following example code for the react-player component: <ReactPlayer url="https://www.youtube.com/watch?v=ysz5S6PUM-U" />

Steps to Reproduce

1. Yarn add react-player
2. Add 'import ReactPlayer from ‘react-player’ in your file
3. Add <ReactPlayer url="https://www.youtube.com/watch?v=ysz5S6PUM-U" /> to your functional component

Environment

• URL attempting to play: “https://www.youtube.com/watch?v=ysz5S6PUM-U”
• Browser: Chrome
• Operating system: MacOs

Other Information

I have a Typescript project. A similar issue was posted and for them deleting “flexbox-react” helped but I have no such dependency.

I have tried it in a sandbox, with react and typescript, and it works perfectly there so it must be something with my app, but I am not sure how to figure that out. I would appreciate any insight on this!

The screenshot below is of some warnings I received when installing the package.

The error:

[Mutesa-Cedric]

@MarianaK96 I think this will help as it worked for me:

import { default as _ReactPlayer } from 'react-player/lazy';
import { ReactPlayerProps } from "react-player/types/lib";
const ReactPlayer = _ReactPlayer as unknown as React.FC<ReactPlayerProps>;

[cookpete]

Possibly relevant? https://github.com/microsoft/fluentui/issues/16058#issuecomment-749258586