Estoy lidiando con un problema extraño relacionado con modales/portales en React.js.

El problema es que el modal no aparece como una ventana emergente sobre los otros elementos de la pantalla. He estado revisando la documentación pero no puedo detectar mi error.

El siguiente código es para el modal llamado "Iniciar sesión", así como para los archivos de la "Aplicación".

Iniciar sesión.js

 import React from "react"; import ReactDOM from "react-dom" const SignIn =({message,isopen,onclose})=>{ if(!isopen) return null; return ReactDOM.createPortal( <div className="modal"> <h2>{message}</h2> <button onClick={onclose}>Close</button> </div>, document.body ); }; export default SignIn;

Aplicación.js

 import SignIn from "./Components/Modal/SignIn"; const App = ()=>{ const [currentPaneName, setCurrentPaneName]=useState("MainPane"); const [modalOpen, setModalOpen]=useState(false); return( <React.Fragment> <Header onNewPaneSelected={updateCurrentPane} /> <div> <SignIn message="This is a test modal" isopen={modalOpen} onclose={()=>setModalOpen(false)} /> </div> <main> <button onClick={()=>setModalOpen(true)}>Open Modal</button> <LoadPaneHandler /> </main> {/* <Footer /> */} </React.Fragment> ); } export default App;

He omitido código que no era relevante, por eso puede parecer que faltan cosas.

El resultado de esto cuando ejecuto el sitio web es este...

Aparece el botón para abrir el modal, pero cuando se hace clic, abre el texto y el botón para cerrarlo en la parte inferior de la pantalla y no sobre los otros contenidos como debería hacerlo un modal. Todos los demás elementos de la interfaz de usuario se pueden usar por completo mientras esto sucede.

Como dije, he repasado este problema varias veces y no puedo detectar mi error. ¡Cualquier sugerencia sería muy apreciada!