I want to pre-fill pardot forms and my form link is an iframe and below is iframe link where my pardot forms are generating:

<IframeWrapper src={"https://go.offer.u-blox.com/l/1021866/"} />

I can pre-fill specific form using query parameters like:

https://go.offer.u-blox.com/l/1021843/2023-09-14/fbbj?first_name=abc

But I need to pre-fill dynamically values dynamically and I have fetch paramters from localstorage like below:

useEffect(() => {
   
    checkConsent();
    if (typeof window !== "undefined") {
     
      if (
        localStorage.isLoggedIn === true ||
        localStorage.isLoggedIn === "true"
      ) {
        let firstname = localStorage.getItem("firstName");
  
        let firstNameElements = document.getElementsByName("firstname");
        if (firstNameElements && firstNameElements[0]) {
          firstNameElements[0].value = firstname;
        }
      }
    }
    return true;
  }, []);

How I can add firstname value here in Inframe link I tried like this but unable to do so : <IframeWrapper src={"https://go.offer.u-blox.com/l/1021843/2023-09-14/gnjj?first_name={firstname}"} />

can anyone help me on this!