designing component by mdbreact

Question

I took ready-made code from the mdbreact website And I get the error

Error: Invalid hook call. Hooks can only be called inside 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 See https://reactjs.org/link/invalid-hook-call for tips on how to debug and fix this problem.

I would love for you to help me

login component

import React from "react";
import { MDBContainer, MDBRow, MDBCol, MDBInput, MDBBtn } from 'mdbreact';


export default function LoginForm() {
    return(<MDBContainer>
        <MDBRow>
            <MDBCol md="6">
                <form>
                    <p className="h5 text-center mb-4">Sign in</p>
                    <div className="grey-text">
                        <MDBInput label="Type your email" icon="envelope" group type="email" validate error="wrong"
                            success="right" />
                        <MDBInput label="Type your password" icon="lock" group type="password" validate />
                    </div>
                    <div className="text-center">
                        <MDBBtn>Login</MDBBtn>
                    </div>
                </form>
            </MDBCol>
        </MDBRow>
    </MDBContainer>)

}

package.json

{
  "name": "react-complete-guide",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.2",
    "axois": "0.0.1-security",
    "bootstrap": "^4.6.0",
    "history": "^5.0.0",
    "immer": "^8.0.0",
    "jquery": "^3.5.1",
    "local-storage": "^2.0.0",
    "mdbreact": "^5.0.2",
    "popper.js": "^1.16.1",
    "react": "^16.0.0",
    "react-bootstrap": "^1.5.2",
    "react-dom": "^16.0.0",
    "react-hook-form": "^7.0.7",
    "react-redux": "^5.0.6",
    "react-router": "^3.2.6",
    "react-router-dom": "^5.2.0",
    "react-router-redux": "^4.0.8",
    "react-scripts": "1.0.13",
    "redux": "^3.7.2"
  },
  "resolutions": {
    "immer": "7.0.9"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';


import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

App

import './App.css';
import React from 'react'
import { Provider } from 'react-redux'
import store from './newProject/Store/store'
import React from 'react';

import RouterApplication from './newProject/router'


function App() {
  return (
      <Provider store={store}>
       <RouterApplication></RouterApplication>
      </Provider>)
}
export default App

router

import { Route, Switch } from 'react-router-dom'
import LoginForm from './Component/LoginComponent/login'
import Signup from './Component/SignupComponent/signup'
import React from 'react'
export default function RouterApplication() {
    return <div>
        <Switch>
            <Route path='/signup'>
                <Signup></Signup>
            </Route>
            <Route path='/login'>
                <LoginForm></LoginForm>
            </Route>
        </Switch>
    </div>
}