Hubspot forms with Next.js 13 - Unhandled Runtime Error: reCAPTCHA placeholder element must be an element or id

Question

Im having some difficulty solving this Error in my Next.js 13 application. Im am using the app router and integrating the hubspot form using an embed code. I have included the Hubspot script in a next tag in the layout.tsx file and am rendering the form using the following function:

"use client";

import { useEffect } from "react";

export function HubspotContactFrom({ data }) {
const { portalId, formId } = data;

useEffect(() => {
if (window.hbspt) {
window.hbspt.forms.create({
portalId,
formId,
region: "eu1",
target: "#hubspot-form",
});
}
}, [portalId, formId]);
return <div id="hubspot-form" />;
}

The form renders fine and seems to work okay too, hubspot is receiving data and if I inspect on both the live and the local site I can see a recaptcha token is present however on my local version I am getting this error:

Unhandled Runtime Error Error: reCAPTCHA placeholder element must be an element or id

Any help on this would be much appreciated, Ive been around the houses on this one and cant seem to find anything.

Aside from inspecting the source and console tabs in the inspector to make sure there are no errors or bad network responses I am out of ideas. The only other mention of this issue I have found has the solution of using the next-hubspot package however it would appear this is specific to previous versions of next.js and not the app router. I have tried using both the method as well as loading the script like so :

"use client";

import { useEffect } from "react";

export function HubspotContactFrom({ data }) {
  const { portalId, formId } = data;

  useEffect(() => {
    const form = document.createElement("script");
    form.src = "https://js-eu1.hsforms.net/forms/embed/v2.js";
    form.id = "hubspot-embed";
    document.body.append(form);

    form.addEventListener("load", () => {
      if (window.hbspt) {
        window.hbspt.forms.create({
          portalId,
          formId,
          region: "eu1",
          target: "#hubspot-form",
        });
      }
    });
  }, [portalId, formId]);
  return <div id="hubspot-form" />;
}

Which appears to make no difference.

I have also tried using react-hubspot-forms package to na avail the issue persists.