`× Error: llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:

1. Es posible que tenga versiones que no coincidan de React y el renderizador (como React DOM)
2. Podrías estar rompiendo las Reglas de los Hooks
3. Es posible que tenga más de una copia de React en la misma aplicación.

Soy nuevo en reaccionar, así que esto significa que solo sigo los tutoriales de Internet y estoy tratando de hacer una barra lateral para mi proyecto. Esta barra lateral consta de un cuadro de búsqueda que incluye un icono de búsqueda de material-ui. Después de instalar @material-ui/icons y @material-ui/core y los importé al archivo javascript (sidebar.js) en el que estoy trabajando, aparece este error. Sin embargo, esta llamada de enlace inválida dice que el problema ocurre en mi otro archivo (index.js) que apunta a una línea de código que comienza con ReactDom.render( , aunque react y react-dom están en la misma versión. Esta es la código de mi 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

Y este es mi código de 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') );