//Home.js import React from "react"; function Header() { return ( <div className="header__search"> <ImageSearchIcon onClick = { Upload_img }/> </div> ); } export default Header;

 //Upload_img.js import React, {useState} from "react"; import Modal from '@material-ui/core/Modal'; const Upload_img = (props) => { const [open, setOpen] = React.useState(false); const handleOpen = () => { setOpen(true); }; const handleClose = () => { setOpen(false); }; return ( <div> <Modal open={open} onClose={handleClose} ><h1>hello</h1></Modal> </div> ) } export default Upload_img

Me gustaría usar modal como módulo Pero recibo este tipo de 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