Marketo Lightbox Form on a Gatsby Project - Failed to execute 'postMessage' on 'DOMWindow'

Question

This project is a GatsbyJS Project. I have a button component that takes in the id of the marketo form, and the button text that when clicked opens up a light box that holds a Marketo form. The form renders just fine. However, after filling out a form and hitting submit, this error shows:

forms2.min.js:4 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://...') does not match the recipient window's origin ('https://...').

Here is the button component (sans the styles section):

import React, { useState ,useEffect, useRef } from 'react';
import styled from 'styled-components';
import media from '../../styles/media';




const CustomTrialButton = (props) => {


 const formRef = useRef(null);

 
 useEffect(() => {
    LoadForm(props.id);

},[props.id]);

const LoadForm =(id) => {
    setTimeout(() => {
    if(typeof MktoForms2 !== 'undefined'){
        MktoForms2.loadForm(
             "https://338-HTA-134.mktoweb.com", 
             "338-HTA-134", 
             id,
             (form) => {
         formRef.current = form
        });
    } else {
        LoadForm(id)
    }
    },60)
}

function startTrial(event) {
    if(formRef && formRef.current){
        MktoForms2.lightbox(formRef.current).show();
        event.preventDefault();
    }
};

return (
<Container>
    <LightBoxButton onClick={startTrial}>{props.text}</LightBoxButton>
</Container>
);

};

I have seen that the reason this happens is because a lightbox isn't done loading and was solved by writing onload = "iFrameResize()" However, I don't know how to implement that in my react project, where the iFrame is coming from Mkto2.forms.js file. If anyone can help me with this that would be very much appreciated!