OnAction event on tinymce editor v6 for custom button is not working

I am trying to get the click event of the tinymce custom button while building a plugin. My code snippet looks like:

const openDialog = () => editor.windowManager.openUrl({
    type: 'panel',
    title: 'Example plugin',
    url : '/vendors/tinymce/plugins/gallery/dash.html',

    buttons: [
      {
        type: 'cancel',
        text: 'Close'
      },
      {
        type: 'custom',
        text: 'Select',
        buttonType: 'primary',
        onAction: function(api) {
          const data = api.getData();
          console.log('Custom button clicked');
          /* Insert content when the window form is submitted */
          editor.insertContent('Title: ' + data.title);
          api.close();
        }
      }
    ],

Can Anyone help me with this?

I tried reading the tinymce docs where it clearly states onAction is a way to go but it is still not working

tinymce.PluginManager.add("gallery", (editor, url) => {
    const openDialog = () =>
        editor.windowManager.openUrl({ // https://www.tiny.cloud/docs/ui-components/urldialog/#interactiveexample
            type: "panel",
            title: "File Explorer",
            url: '/static/tiny/gallery.html',

            buttons: [
                {
                    type: "cancel",
                    text: "Close",
                },
            ],
            onMessage : function(instance, data) {
                instance.close()
            }
        });

    /* Add a button that opens a window */
    editor.ui.registry.addButton("gallery", {
        text: "Gallery",
        onAction: () => {
            /* Open window */
            openDialog()
        },
    });

    /* Return the metadata for the help plugin */
    return {
        getMetadata: () => ({
            name: "gallery",
            url: "http://exampleplugindocsurl.com",
        }),
    };
});