title: How to change private @mobx.observable.ref mobx state via props?
body: <p>Currently my class is defined this way:</p>
  
  <pre><code>type ClapWidgetProps = {
    animate: boolean,
  
  };
  
  export class Widget extends React.Component&lt;WidgetProps&gt; {
    @mobx.observable.ref private animate: boolean = this.props.animate || false;
  </code></pre>
  
  <p>This observable <code>animate</code> controls some animation effect inside the widget.</p>
  
  <p>As you can see the internal state <code>animate</code> is initialised by <code>this.props.animate</code>. </p>
  
  <p>What I want to achieve is that I wish to able to change the value of the observable <code>animate</code> via <code>this.props.animate</code> continuously even after initialisation.</p>
  
  <p>How can I let <code>this.props.animate</code> override observable <code>animate</code> when the property is changed?</p>