About <sn-choice-list> value

[heeeding]

As you can see in the snapshots I included, I wrote html and client scripts.

So it's supposed to call in relevant years and moths in drop-down form,
But it only calls in years and doesn't get to apply for moths.
Is something wrong in my script?

Or How to write it as an example based on the HTML code?

HTML

<td>
    <sn-choice-list
          field="snChoice"
          sn-model="c.selectedMonth"
          sn-options="c.monthsList"
          sn-value-field="monthValue" 
          sn-text-field="monthText" 
          sn-on-change="c.selectMonth(data.selectedMonth)" 
      >
      </sn-choice-list>
  </td>

Client Script

api.controller = function() {
    var c = this;
    c.monthsList = [
            { monthValue: '01', monthText: 'January' },
            { monthValue: '02', monthText: 'February' },
            { monthValue: '03', monthText: 'March' },
            { monthValue: '04', monthText: 'April' },
            { monthValue: '05', monthText: 'May' },
            { monthValue: '06', monthText: 'June' },
            { monthValue: '07', monthText: 'July' },
            { monthValue: '08', monthText: 'August' },
            { monthValue: '09', monthText: 'September' },
            { monthValue: '10', monthText: 'October' },
            { monthValue: '11', monthText: 'November' },
            { monthValue: '12', monthText: 'December' }
    ];
            c.selectMonth = function(selectedValue) {
            var url_date = ""; 
            var type = 0; 
            url_date = selectedValue.padStart(0,2); 
            url = url_top + '&date=' + url_date + '&calcuration=' + type + '&userid=' + c.data.userSysId;
            window.location.href = url;
    }
    }