Stop function of all commands are getting executed before the actual run command.

I created 3 custom button(edit, preview, save) and all those have run and stop methods. When i click on any button, it triggers the run command of that button but before that stop function of other buttons are executed.

    // Edit code button
    panelManager.addButton('options', {
      id: 'edit-code',
      className: 'fa fa-edit',
      command: {
        // @ts-ignore
        run(editor: GrapesJS, sender: {}) {
          log.debug('Edit opened');
        },
        stop(editor: GrapesJS) {
          log.debug('Edit complete');
        }
      },
      attributes: { title: 'Edit code' },
      active: false
    });

    // Add preview button
    panelManager.addButton('options', {
      id: 'custom-preview',
      label: 'Preview',
      command: {
        // @ts-ignore
        run(editor: GrapesJS, sender: {}) {
          log.debug('Edit opened');
        },
        stop(editor: GrapesJS) {
          log.debug('Edit complete');
        }
      },
      attributes: { title: 'Preview' },
      active: false
    });

    // Add save button
    panelManager.addButton('options', {
      id: 'save',
      label: 'Save',
      command: {
        run(editor: GrapesJS) {
          log.debug('saved');
        },
        stop(editor: GrapesJS) {
          log.debug('Save complete');
        }
      },
      attributes: { title: 'Save' },
      active: false
    });

When i click on Edit, below is the console output

[Email Template] Stop preview 
[Email Template] Save complete 
[Email Template] Edit opened

When Edit button closed (stop command)

[Email Template] Edit complete 

What is causing the other stop commands to trigger first even when i dont have any event listeners?