react-useportal: Can't show modal on page load without opening event

Whenever I want to show modal on render(make it visible without opening event) I get Warning: Expected server HTML to contain a matching <div> in <div>.

My Code;

const SignInModal = () => {
  var { openPortal, closePortal, isOpen, Portal } = usePortal({
    closeOnEsc: true,
    // bindTo: typeof window !== 'undefined' && document.getElementById('__next'),
  })

  const modalElem = !isOpen && (
    <Portal>
      <ModalBox closeModal={closePortal}>
        <div className="modal__mid1">
          <h4 className="header--medium">Sign In to Walkway</h4>
          <InputText_1>Email or Username</InputText_1>
          <InputText_1>Password</InputText_1>
          <div className="modal__">
            <span>Forgot Password</span>
          </div>
          <div className="modal__mainBtn">
            <div className="modal__mainBtn__line" />
            <TextButton size="18">Sign Up</TextButton>
            <div className="modal__mainBtn__line" />
          </div>
          <span>or</span>
          <div className="modal__">
            <button className="haloOnHov socialMediaBtn">
              <div
                className="socialMediaBtn__icon"
                style={{
                  backgroundImage: `url('../static/icons/fb.svg')`,
                }}
              />
              Sign In with Facebook
            </button>
          </div>
          <p>
            Don’t have an account? <span>Register Now</span>
          </p>
        </div>
      </ModalBox>
    </Portal>
  )

  // return modalElem
  return {
    SignIn_modal: () => modalElem,
    openPortal,
    isOpen,
  }
}