Добавление класса стилей в DOM дерево - toggle не красится после нажатия на кнопку "Далее"

Всем привет. Реализовал переключатель (toggle), который открывает (статус страницы isDeviceLockEnabled = true) или скрывает функционал на странице (статус страницы isDeviceLockEnabled = false).

В момент клика по переключателю (если страница была выкл, то цвет переключателя серый) слайдер смещается в права и поле- фон переключателя меняется с серого на синий.

Открывается модальное окно с просьбой ввести пароль-подтверждение. На окне две кнопки (отменить\продолжить). При клике на продолжить- модалка скрывается, открывается доп функционал страницы, (статус страницы стал isDeviceLockEnabled = true) , тогл должен быть синего цвета, но становится серым.
Прикладываю код разметки:

     <label class='form-switch'>
       <input type='checkbox' name='toggle-device-lock' id='toggle-device-lock' 
         class="form-check-input" 
            {{#isDeviceLockEnabled}}checked{{/isDeviceLockEnabled}} 
                />
              <span class="form-switch-slider" for='toggle-device-lock'></span>
      </label> 
    <button class='button button-secondary button-small cancel'>{{ cancelButton }}</button>
    <button class='button button-dark-grey-disabled button-small device-pin-new-continue'>{{ continueButton }}</button>

Логика окрашивания переключателя следующая: кликаем по переключателю, проходит проверка состояния блок\разблок, если окно заблокировано, то добавляем класс active (.form-switch-slider.active) в разметку, который окрашивает в синий цвет. Если мы из активного переключаем в неактивно, то тогл окрашиваем из синего в серый.

       toggleDeviceLock(e) {     
          e.preventDefault();
          const enterPinView = new window.Whisper.EnterPinView({
            step: !this.isDeviceLockEnabled() ? 1 : 2, // 1 - enable lock, 2 - disable lock
            enableLock: this.enableDeviceLock.bind(this),
            disableLock: this.disableDeviceLock.bind(this),
            pinLength: this.pinLength,
          }).render();
        
          $('body').append(enterPinView.el);
        
          const toggleCheckbox = document.getElementById('toggle-device-lock');
          const slider = document.querySelector('.form-switch-slider');    
        
          if (toggleCheckbox.checked && !this.isDeviceLockEnabled()) {  
            slider.classList.add('active'); 
          } 
    
          const continueButton = enterPinView.el.querySelector('.device-pin-new-continue');
          continueButton.addEventListener('click', () => {      
            if (toggleCheckbox.checked && !this.isDeviceLockEnabled()) {          
    
              slider.classList.add('active'); 
            } else {      
              slider.classList.remove('active'); 
            } 
          });    
          
          const cancelButton = enterPinView.el.querySelector('.button-secondary.cancel');
          cancelButton.addEventListener('click', () => {      
            this.render();         
          });      
        },

Код стилей :

    .form-switch {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        height: 28px; 
      }  
      
       
      .form-switch-slider.active {
        background: var(--clr-light-2);   // синий
        // background: var( --clr-system-7);    // серый   
      }

Помогите понять, почему при клике по кнопке "Продолжить" заливка переключателя снова становится серой