BUG : The facebook plugin is not working in the grapes js

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v9

Reproducible demo link

Not there

Describe the bug

How to reproduce the bug?

1. Install the Grapes js in react app and run it
2. Make the facebook plugin components and import it in grapes js ( get the facebook page listing code from https://developers.facebook.com/docs/plugins/page-plugin/)
3. Run the application
4. Drag and drop the facebook component in editor

What is the expected behavior? After dropping the facebook component it should display the facebook page in editor

What is the current behavior? After dropping the facebook component , it is not displaying the facebook page But after the tab reload the facebook page is displayed in the editor

If is necessary to execute some code in order to reproduce the bug, paste it here below:

//Editor Code

const editor = grapesjs.init({
      container: "#builder",
      plugins: [
        
      ], 
      pluginsOpts: {
        "custom-gjs-basic-plugin": {
          id: self.state.id,
        },
      },
      fromElement: 1,
      allowScripts: 1,
      avoidInlineStyle: 0,
      protectedCss: ``,
      cssIcons: null,
      canvas: {
        styles: [builderCSS],
        scripts: [],
      },
      canvasCss: `.gjs-selected {outline: 2px solid #ff1430 !important;outline-offset: -2px !important;}.gjs-hovered{}`,
      storageManager: {
        id: "gjs_",
        type: "remote",
        urlStore: this.API_URL + "update_builder/" + this.state.id,
        urlLoad: this.API_URL + this.state.id,
        params: {draft: "1",},
        headers: { Authorization: localStorage.getItem("token")},
      },
      assetManager: {
        storageType: "",
        storeOnChange: true,
        storeAfterUpload: true,
        upload: process.env.REACT_APP_ASSET_PATH, //for temporary storage
        assets: [],
        uploadName: "file",
        uploadFile: function (e) {
          var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
          var formData = new FormData();
          for (var i in files) {
            formData.append("upload", files[i]);
          }
          PageService.contentUpload(formData)
            .then((response) => {
              var imageUpload = response.data.path.replace(/[//:-]/g, "");
              var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpe?g|png|gif|bmp)$/;
              if (regex.test(imageUpload.toLowerCase())) {
                editor.AssetManager.add(response.data.path);
              } else {
                alert("Please upload valid images.");
              }
            })
            .catch((error) => {
              alert("Please upload valid images.");
            });
        },
      },
      pageManager: true,
      layerManager: {
        appendTo: ".layers-container",
      },
      traitManager: {
        appendTo: ".traits-container",
      },
      selectorManager: {
        appendTo: ".selectors-container",
        componentFirst: true,
      },
      styleManager: {
        appendTo: ".styles-container",
        clearProperties: 1,
      },
})

// Facebook component
editor.setComponents(`<div id="fb-root"></div>
              <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v13.0" nonce="aZMwnOeb"></script>
              <div class="fb-page" style="width:100%" data-href="https://www.facebook.com/facebook" data-tabs="" data-width="" 
              data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
                <blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore">
                <a href="https://www.facebook.com/facebook">Meta</a></blockquote></div>`)

Code of Conduct

• I agree to follow this project's Code of Conduct