createPortal in NextJS

Question

I am trying to create a modal for when a form has been validated and submitted, a thank you message will appear. The project is setup as a Typescript app, but i have mostly been working with just react.. need to learn typescript.. I have done the following steps-

1. _document.js file added a div with an id of "modal-overaly:
2. In my contact form component, I import the Modal component and pass state once the form is sent.
3. In the Modal component I import createPortal- I create a variable named portalElement = document.getElementById("modal-overlay");
4. I return if showModal ? createPortal(modalContent, portalElememt) : null;

I am getting back an error saying that reference error: document is not defined.

I am unsure what is wrong. Any tips are greatly appreciated!!

--Document file--
 <div id="modal-overlay"></div>


--Modal Component--
import { createPortal } from "react-dom";

const Modal = (props) => {

  const { showModal } = props.show;
  const portalElement = document.getElementById("modal-overlay");


  const modalContent = () => {
    return (
      <div>
        <h1>
          Thank you for your inquire! We have receieved your message! Demelo
          Dining is ready to serve your upcoming event.{" "}
        </h1>
      </div>
    );
  };

  return showModal ? createPortal(modalContent, portalElement) : null;
};

export default Modal;