How do I integrate RDStation Forms in my NextJS project?

I need to add a form to my page. The first time I navigate to the route with this component, it renders normally, but each time I reload the page, the form disappears. Additionally, when I manually disable the cache in my browser and reload the page, the form appears. I receive a CDN script tag and an example of how to implement the form, but it simply doesn't work. Tutorial that doesn't work: https://ajuda.rdstation.com/s/article/Inserir-formul%C3%A1rio-em-site-criado-em-React?language=en_US

import { useEffect } from 'react';

declare global {
    interface Window {
        RDStationForms(param1: string, param2: string): void;
    }
}


const RdStationForm = () => {
    useEffect(() => {
        const createForm = () => {
            if (window.RDStationForms) {
                new window.RDStationForms('newsletter-sampleName-sampleId', 'sampleId').createForm();
            }
        }

        createForm()
    }, []);

    return <div role="main" id="newsletter-sampleName-sampleId" />;
}



export default RdStationForm;

Reload my page and the form still be visible

Solution

The only way I found a solution for this is creating a separated HTML and use an iframe in Next to show the form. It can be used in a vercel hosting or ftp subdomain or whatever other host option you prefer.

// my nextjs 13 component

import { styled } from "@mui/material";

const RdStationForm = () => {
  const IframeStyled = styled("iframe")({
    border: "none",
  });

  return (
    <IframeStyled
      height={171}
      width={400}
      src="https://subdomain.mydomain.com.br/Form.html"
      sx={{ maxWidth: { xs: "250px", md: "400px" } }}
    />
  );
};

export { RdStationForm };

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form</title>
  </head>
  <body>
    <div role="main" id="myFormId"></div>
    <script
      type="text/javascript"
      src="https://myformid.cloudfront.net/js/rdstation-forms/stable/rdstation-forms.min.js"
    ></script>
    <script type="text/javascript">
      new RDStationForms("myformId", "myFormId2").createForm();
    </script>
  </body>
</html>