Ember Rerender ClassNameBindings Failing

I have a component which needs to be re-rendered based on a controller variable change. However, everytime I rerender my component, I loose the classNameBindings. How can I avoid this?

Component

import Ember from 'ember';
export default Ember.Component.extend({
    isShown: false,
    classNameBindings: ['isShown::hide'],
    reloadComponent: Ember.observer('isShown', function () {
        this.rerender();
    }),
});

Template that renders the component.

{{my-component isShown=isShown}}

Controller for the route

export default Ember.Controller.extend({
    isShown: false,
});

Some function changes the value of isShown. That gets changes in component. However, the classNameBindings in component are lost. They always show 'hide class' irrespective of isShown variable value.

Why does this happen? How can I avoid this?