Form is not submitting

I am trying to create as custom block. But the form is not submitting when i use components inside content.

const blockManager = editor.BlockManager;

  blockManager.add("pre-made-element--registration", {
    label: "Registration Form",
    category: "Pre-Made Elements",
    attributes: { class: "fa fa-user-plus" },
    content: {
      script: function () {
        const $ = window.$;
        const form = $(this).find("form");

        form.submit((event) => {
          const formData = form.serializeArray();
          console.log(data);
        });
      },
      components: "HERE IS THE FORM COMPONENT",
    },
  });
};

I am able to get all the form data when i use content instead of component. But then it's not allowing me drag new inputs to form.

const blockManager = editor.BlockManager;

  blockManager.add("pre-made-element--registration", {
    label: "Registration Form",
    category: "Pre-Made Elements",
    attributes: { class: "fa fa-user-plus" },
    content: {
      script: function () {
        const $ = window.$;
        const form = $(this).find("form");

        form.submit((event) => {
          const formData = form.serializeArray();
          console.log(data);
        });
      },
      content: "HERE IS THE FORM COMPONENT",
    },
  });
};