Загрузочный файл Material Design (MDBReact) не работает

Получение следующей ошибки при использовании компонентов mdbreact,

← → 1 из 2 ошибок на странице Ошибка: недопустимый вызов ловушки. Хуки могут быть вызваны только внутри тела функционального компонента. Это могло произойти по одной из следующих причин:

1. У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM)
2. Возможно, вы нарушаете правила крючков
3. У вас может быть несколько копий React в одном приложении. См. Советы по отладке и устранению этой проблемы.

 "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.1.2",
    "@testing-library/user-event": "^12.2.2",
    "mdbreact": "^4.27.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },

Я добавил следующие index.js

   import '@fortawesome/fontawesome-free/css/all.min.css'; 
    import 'bootstrap-css-only/css/bootstrap.min.css';
    import 'mdbreact/dist/css/mdb.css';

App.js

import logo from './logo.svg';
import './App.css';
import CardExample from './ReviewCard'
function App() {
  return (
    <div className="App">
      <CardExample />
    </div>
  );
}

export default App;

ReviewCard.js

import React from 'react';
import { MDBBtn, MDBCard, MDBCardBody, MDBCardImage, MDBCardTitle, MDBCardText, MDBCol } from 'mdbreact';

const CardExample = () => {
  return (
    <MDBCol>
      <MDBCard style={{ width: "22rem" }}>
        <MDBCardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" waves />
        <MDBCardBody>
          <MDBCardTitle>Card title</MDBCardTitle>
          <MDBCardText>
            Some quick example text to build on the card title and make
            up the bulk of the card&apos;s content.
          </MDBCardText>
          <MDBBtn href="#">MDBBtn</MDBBtn>
        </MDBCardBody>
      </MDBCard>
    </MDBCol>
  )
}

export default CardExample;