Cannot use `ember-power-select` in {{#each}} block

Question

//controller
categories: ['category0', 'category1', 'category2'],
units: ['unit0', 'unit1', 'unit3'],

//hbs
<ul>
  {{#each categories as |category|}}
    <label>{{category}}</label>
    <li>
      <label>Select Unit</label>
      {{#power-select
        options=units
        selected=selected
        onchange=(action (mut selected)) 
        as |unit|
      }}
        {{unit}}
      {{/power-select}}
    </li>
  {{/each}}
</ul>

The above code generated 3 power-select boxes. When I select a value in the 1st power-select box, the same value gets selected in the 2nd and 3rd box too.

There are 3 categories so it loads three power-select boxes. All 3 power-select options are of same array (units: ['unit0', 'unit1', 'unit3']).

What is the way to make each power-select box unique one? So that i can select a different value in each power-select boxes.

Answer 1

The below solution works

categories: [{label: 'category0'}, {label: 'category1'}, {label: 'category2'}
],
units: ['unit0', 'unit1', 'unit3']

<ul>
  {{#each categories as |category|}}
    <label>{{category}}</label>
    <li>
      <label>Select Unit</label>
      {{#power-select
        options=units
        selected=category.selected
        onchange=(action (mut category.selected)) 
        as |unit|
      }}
        {{unit}}
      {{/power-select}}
    </li>
  {{/each}}
</ul>

working twiddle