How to use bracket notation of object in handlebar template?

I am creating an emberjs component from the route template attribute I am passing value to show in the template. But I am unable to access it in the component template.

//route.hbs
{{b-select 
    options=model.products
    valueProp='name'
}}

Model

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return Ember.RSVP.hash({
            names: [{name: 'abc'}, {name: 'xyz'}]
        });
    }

});

Component b-select hbs file

<select class="form-control" multiple={{multiple}}>
  {{#each options as |option|}}
    <option value="{{option}}">{{option[valueProp]}}</option>
  {{/each}}
</select>

Component JS file

import Ember from 'ember';
import fallbackIfUndefined from '../utils/computed-fallback-if-undefined';

export default Ember.Component.extend({
    multiple: fallbackIfUndefined(false),
    options: fallbackIfUndefined(null),
    valueProp: fallbackIfUndefined(0),
    actions: {

    },
    didInsertElement() {
        //initialize jquery functions
        this.$('select').selectpicker({size: 6});
    },
    willDestroyElement() {
        //remove all events
    }
});

The error I am getting is

Error: Parse error on line 3: ...alue="{{option}}">{{option[valueProp]}}< -----------------------^ Expecting 'ID', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'INVALID'