stateFor not working for ember-state-serivces

I am building a single page music web app using Ember. Each track is represented on the page as a component. There are many tracks on a given page. When a user clicks play, the component updates its UI to reflect that and the master route keeps track of which track is currently playing.

But when I switch routes to explore other parts of the app, and then return to the one where the track is playing, Ember has destroyed and rebuilt each component, setting everything back to its initial state and making the route's current_track object obsolete.

So to get around this, I'm trying to use ember-state-services to track the css state of each track component.

However I'm getting the error: feed-card.js:7 Uncaught TypeError: Cannot set property 'playing' of undefined

feed-card.js :

import Ember from 'ember';
import stateFor from 'ember-state-services/state-for';

  export default Ember.Component.extend({
    card_state: stateFor('track-card-state', 'model'),
    setup: function() {
      this._super();
      this.favored = false;
      this.get('card_state').playing = true;
      this.get('card_state').progress = "40%";
    }.on('init')
  })

track-card-state.js :

import Ember from 'ember';

const TrackCardState = Ember.Object.extend();

TrackCardState.reopenClass({
  initialState(instance) {
    return {
      playing: true,
      progress: "40%"
    }
  }
});

export default TrackCardState;