Marketo form appearing twice in gatsby

Question

I am having an issue while implementing marketo form with gatsby at times. I have created a custom component for marketo forms which works smoothly when an input form id is given.

I am using Drupal 8 as backend for gatsby front end, so all content for the site comes dynamically from drupal.

This is the code for custom component :

import React, { useEffect, useState } from 'react'
import { Link } from "gatsby"

const MarketoForm = ({ fid }) => {

let formId = `mktoForm_${fid}`
const [formSuccess, setFormSuccess] = useState(false)

let message = ''
switch (fid) {
    case 1537: // get in touch form
        message =  <>
                     <h1>Thanks for the message!</h1>
                    </>
        break;

    default:
        message = <>
            <h1>Thanks for the message!</h1>
            </>
        break;
}
useEffect(() => {

    const script = document.createElement('script');
    document.body.appendChild(script);
    // Depending on your lint, you may need this
    // eslint-disable-next-line no-undef
    MktoForms2.loadForm("//app-lon03.marketo.com", "416-MPU-256", fid, function (form) {
        // Add an onSuccess handler
        form.onSuccess(function (values, followUpUrl) {
            // Get the form's jQuery element and hide it
            form.getFormElem().hide();
            // Return false to prevent the submission handler from taking the lead to the follow up url
            setFormSuccess(true);
            return false;
        });
    });
}, [])

return (
    <>
        {formSuccess ? 
        <div>
            {message}
        </div> : <form id={formId}></form>}
    </>
)
}

export default MarketoForm

and if I call it like

<MarketoForm fid={146} />

It works perfectly without any issues.

I am trying to load html to a particular div, this html contains script as well.I have written code so that this code will be executed as well.

class article extends Component {

 state = {
  externalScript: ''
 }

 componentDidMount() {
   let htmlContent = this.props.data && this.props.data.article && 
   this.props.data.article.body.processed
   if (htmlContent.length > 0) {
    if(/<script>[\s\S]*<\/script>/g.exec(htmlContent)){
     let extractedScript = /<script>[\s\S]*<\/script>/g.exec(htmlContent)[0];
     this.setState({ externalScript: extractedScript })
    }
   }
 }

 componentDidUpdate(){
   let scriptToRun = this.state.externalScript
   if (scriptToRun !== undefined && scriptToRun !== '') {
   let scriptLines = scriptToRun.split("\n")
   scriptLines.pop()
   scriptLines.shift()
   let cleanScript = scriptLines.join("\n")
   window.eval(cleanScript)
  }
 }

 render(){
  // fetches data here ....
  <>
  <MarketoForm fid={142} />
  <MarketoForm fid={156} />
  <div dangerouslySetInnerHTML={{ __html: article.body.processed }}>

  </div>
  </>
 }

}

So in this article component other marketo form already exists which works fine. At times I can see the same form appearing more than once inside the div (content is from backend).

Upon inspecting the form i can see its just one form not two.

Have anyone faced this issue before? Please suggest some resolutions for this.

Thanks