Invalid hook call - Material Ui

`× 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:

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`

I am new to react so this means I just follow tutorials from the internet and I'm trying to make a sidebar for my project. This sidebar is consist of a search box which includes a search icon from material-ui. After I install the @material-ui/icons and @material-ui/core and imported them to the javascript file (sidebar.js) that I'm working, this error pops-up. However, this invalid hook call says that the problem occurs at my other file (index.js) pointing at a line of code that starts with ReactDom.render( , although the react and react-dom are in the same version. This is the code from my sidebar.js:

import React from "react";
import SearchIcon from '@material-ui/icons/Search'

const Sidebar = () => {
    return (
        <div className="sidebar">
        <div className="sidebar__header">
            <div className="sidebar__search">
                <SearchIcon className="sidebar__searchIcon"/>
                <input placeholder="Search" className="sidebar__input"></input>
              </div>
        </div>
        <div className="sidebar__threads"></div>
        <div className="sidebar__bottom"></div>
        </div>
    )
}

export default Sidebar

And this is my code from the index.js

import React from "react";
import ReactDom from 'react-dom';
import './index.css';
import App from './App';
import { store } from './app/store';
import { Provider } from 'react-redux';

ReactDom.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW