Hi, I am using ghost.org embedded email sign-up form.

The problem is that it doesn't appear on the page.

It's puzzling because my browser detects the div that contains the script. (see screenshot)

The network tab tells me the javascript download is 200



Here is what ghost.org gave me to insert:

<div style="min-height: 58px; max-width: 440px;width: 100%;position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);"><script src="https://cdn.jsdelivr.net/ghost/signup-form@~0.1/umd/signup-form.min.js" data-button-color="#166534" data-button-text-color="#FFFFFF" data-site="https://skillspeed.io/" async></script></div>

I am using a OOB nextjs app to use it. Here is the code for my page:

import Script from "next/script";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div
        style={{
          minHeight: 58,
          maxWidth: 440,
          width: "100%",
          position: "absolute",
          left: "50%",
          top: "50%",
          transform: "translate(-50%, -50%)",
        }}
      >
        <Script
          src="https://cdn.jsdelivr.net/ghost/signup-form@~0.1/umd/signup-form.min.js"
          data-button-color="#166534"
          data-button-text-color="#FFFFFF"
          data-site="https://skillspeed.io/"
          strategy="afterInteractive"
        ></Script>
      </div>
    </main>
  );
}

I also tried turning this div into a separate client component. Still doesn't show in the UI.