title: Getting invalid hook call error in React when I used materidal design bootstrap component in my application
body: <p>I am getting below invalid hook call error in React when I used materidal design bootstrap component in my application</p>
  <p>Error: 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:</p>
  <ol>
  <li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
  <li>You might be breaking the Rules of Hooks</li>
  <li>You might have more than one copy of React in the same app</li>
  </ol>
  <p>This is my header component</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import {
    MDBNavbar,
    MDBNavbarBrand,
    MDBNavbarNav,
    MDBNavItem,
    MDBNavLink,
    MDBNavbarToggler,
    MDBCollapse,
    MDBFormInline,
    MDBDropdown,
    MDBDropdownToggle,
    MDBDropdownMenu,
    MDBDropdownItem,
  } from &quot;mdbreact&quot;;
  
  const Header = () =&gt; {
    return (
      &lt;&gt;
        &lt;MDBNavbar color=&quot;indigo&quot; dark expand=&quot;md&quot;&gt;
          &lt;MDBNavbarBrand&gt;
            &lt;strong className=&quot;white-text&quot;&gt;Navbar&lt;/strong&gt;
          &lt;/MDBNavbarBrand&gt;
          &lt;MDBNavbarToggler /&gt;
          &lt;MDBCollapse id=&quot;navbarCollapse3&quot; navbar&gt;
            &lt;MDBNavbarNav left&gt;
              &lt;MDBNavItem active&gt;
                &lt;MDBNavLink to=&quot;#!&quot;&gt;Home&lt;/MDBNavLink&gt;
              &lt;/MDBNavItem&gt;
              &lt;MDBNavItem&gt;
                &lt;MDBNavLink to=&quot;#!&quot;&gt;Features&lt;/MDBNavLink&gt;
              &lt;/MDBNavItem&gt;
              &lt;MDBNavItem&gt;
                &lt;MDBNavLink to=&quot;#!&quot;&gt;Pricing&lt;/MDBNavLink&gt;
              &lt;/MDBNavItem&gt;
              &lt;MDBNavItem&gt;
                &lt;MDBDropdown&gt;
                  &lt;MDBDropdownToggle nav caret&gt;
                    &lt;span className=&quot;mr-2&quot;&gt;Dropdown&lt;/span&gt;
                  &lt;/MDBDropdownToggle&gt;
                  &lt;MDBDropdownMenu&gt;
                    &lt;MDBDropdownItem href=&quot;#!&quot;&gt;Action&lt;/MDBDropdownItem&gt;
                    &lt;MDBDropdownItem href=&quot;#!&quot;&gt;Another Action&lt;/MDBDropdownItem&gt;
                    &lt;MDBDropdownItem href=&quot;#!&quot;&gt;
                      Something else here
                    &lt;/MDBDropdownItem&gt;
                    &lt;MDBDropdownItem href=&quot;#!&quot;&gt;
                      Something else here
                    &lt;/MDBDropdownItem&gt;
                  &lt;/MDBDropdownMenu&gt;
                &lt;/MDBDropdown&gt;
              &lt;/MDBNavItem&gt;
            &lt;/MDBNavbarNav&gt;
            &lt;MDBNavbarNav right&gt;
              &lt;MDBNavItem&gt;
                &lt;MDBFormInline waves&gt;
                  &lt;div className=&quot;md-form my-0&quot;&gt;
                    &lt;input
                      className=&quot;form-control mr-sm-2&quot;
                      type=&quot;text&quot;
                      placeholder=&quot;Search&quot;
                      aria-label=&quot;Search&quot;
                    /&gt;
                  &lt;/div&gt;
                &lt;/MDBFormInline&gt;
              &lt;/MDBNavItem&gt;
            &lt;/MDBNavbarNav&gt;
          &lt;/MDBCollapse&gt;
        &lt;/MDBNavbar&gt;
      &lt;/&gt;
    );
  };
  
  export default Header;
  </code></pre>
  <p>App.js</p>
  <pre><code>import logo from './logo.svg';
  import './App.css';
  import Header from './components/Header';
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
         &lt;Header /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>index.js</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import '@fortawesome/fontawesome-free/css/all.min.css';
  import'bootstrap-css-only/css/bootstrap.min.css';
  import'mdbreact/dist/css/mdb.css';
  import reportWebVitals from './reportWebVitals';
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;App /&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  
  reportWebVitals();
  </code></pre>