Correct attribution for embedded Hubspot form

Question

I have an embedded hubspot form on my website, but when traffic comes from Google Ads it does not get attributed correctly. Instead all the traffic is shown as "direct traffic".

I want to know how the attribution works technically and wether i have to send data manually to make it work. Relevant links to official documentation would be also helpful as it was difficult for me to find an answer for my specific use case, probably i have overlooked something important.

The implementation of the form currently looks like this (using Vue):

<script setup>
import { HUBSPOT_PORTAL_ID } from "@/utils/constants";

const props = defineProps({
  formId: {
    type: String,
    required: true,
  },
});

const cookieEnabledList = useCookie("enabledList");

onMounted(() => {
  const script = document.createElement("script");
  script.src = "https://js.hsforms.net/forms/v2.js";
  document.body.appendChild(script);
  script.addEventListener("load", () => {
    if (window.hbspt) {
      window.hbspt.forms.create({
        portalId: HUBSPOT_PORTAL_ID,
        formId: props.formId,
        target: ".hubspot-form",
      });
    }
  });
});
</script>

Additional info:

After consent window.google_tag_data.ics.entries returns

{
    "ad_storage": {
        "implicit": true
    },
    "analytics_storage": {
        "implicit": true,
        "update": true
    },
    "ad_user_data": {
        "declare": true,
        "implicit": true,
        "update": true
    },
    "ad_personalization": {
        "implicit": false,
        "update": true
    }
}