Código del componente de inicio de sesión:

 import Grid from '@material-ui/core/Grid'; import Paper from '@material-ui/core/Paper'; const Login=()=>{ return ( <Grid> <Paper> Sign in </Paper> </Grid> ) } export default Login

Código para App.js

 import './App.css'; import Login from './components/Login'; function App() { return ( <div className="App"> <Login></Login> </div> ); } export default App;

Código para app.js

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); reportWebVitals();

Error

Error: llamada de enlace 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 Consulte https://reactjs.org/link/invalid-hook-call para obtener consejos sobre cómo depurar y solucionar este problema.