Issue with Action Sheet within Action Sheet

For some strange reason, when I attempt to do an action sheet and then when clicking a button it opens up a new action sheet, the backdrop is there on the first action sheet but not the next one. Both action sheets are created like this:

app.actions.create({
      buttons: [
        [
          {
            text: window.localize("enRoute"),
            icon: mainThis.$root.theme === 'dark' ?  '<img src="' + runCircleDarkImage + '">' : '<img src="' + runCircleLightImage + '">',
            onClick: function () {
              //mainThis.uploadFromStorage();
            }
          },
          {
            text: window.localize("arrived"),
            icon: mainThis.$root.theme === 'dark' ?  '<img src="' + myLocationDarkImage + '">' : '<img src="' + myLocationLightImage + '">',
            onClick: function () {
              //mainThis.uploadPhoto();
            }
          },
          {
            text: window.localize("loaded"),
            icon: mainThis.$root.theme === 'dark' ?  '<img src="' + towDarkImage + '">' : '<img src="' + towLightImage + '">',
            onClick: function () {
              //mainThis.uploadPhoto();
            }
          },
          {
            text: window.localize("completed"),
            icon: mainThis.$root.theme === 'dark' ?  '<img src="' + checkCircleDarkImage + '">' : '<img src="' + checkCircleLightImage + '">',
            onClick: function () {
              //mainThis.uploadPhoto();
            }
          },
        ],
        [
          {
            text: window.localize("cancelled"),
            icon: mainThis.$root.theme === 'dark' ?  '<img src="' + cancelDarkImage + '">' : '<img src="' + cancelLightImage + '">',
            onClick: function () {
              mainThis.cancelJob();
            }
          }
        ]
      ]
    }).open();