I'm dealing with a weird issue concerning modals/portals in React.js.

The issue is that the modal is not appearing as a pop-up over the other elements of the screen. I've been going through documentation but I can't spot my mistake.

The code below is for the modal called "SignIn" as well as the "App" files.

SignIn.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;

App.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;

I've omitted code that wasn't relevant so that's why things may seem missing.

The result of this when I run the website is this...

The button to open the modal appears but when it is clicked, it opens the text and the button to close it at the bottom of the screen and not over the other contents like a modal should. All of the other UI elements are completely usable while this is happening.

As I said, I've gone over this issue quite a few times and I can't spot my mistake. Any pointers would be greatly appreciated!