React. почему не могу вставить компонент из сторонней библиотеки?

Имею последнюю версию react [email protected] и использую библиотеку react-player, импортирую плеер, вставляю в верстку и получаю ошибки:

------- Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

------- VM30105 react-dom.development.js:20085 The above error occurred in the component: at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:14:20) Consider adding an error boundary to your tree to customize error handling behavior.

------- Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Мой код:

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

import { rootReducer } from "../redux/rootReducer.js";

import ReactPlayer from 'react-player'


import { compose, createStore } from "redux";
import { Provider } from "react-redux";
const store = createStore(
    rootReducer,
    compose(
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
            window.__REDUX_DEVTOOLS_EXTENSION__()
    )
);

const app = (
    <Provider store={store}>
        <App />
    </Provider>
);

function App() {
   
    return (
        <div>
          
            <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
            
        </div>
    );
}

export default App;

if (document.getElementById("app")) {
    ReactDOM.render(app, document.getElementById("app"));
}