Как сделать анимированное движение из стороны в сторону с помощью реакции-движения

Question

Я хочу сделать div переходить из стороны в сторону 3 раза после нажатия кнопки. Я могу сделать это, используя код ниже. jsfiddle здесь

var Thing = React.createClass({
  getInitialState: function () {
    return {
      left: 0
    }
  },
  sideToSide: function(count = 1) {
    if (count <= 6) {
      this.setState({ left: this.state.left === 0 ? 45 : 0 })    
      setTimeout(() => {
        this.sideToSide(count + 1)
      }, 200)      
    }     
  },

  render: function() {
    return (
      <div>
        <Motion style={{ left: spring(this.state.left) }}>
          {(a) => (
            <div style={{ marginLeft: a.left }}>
              Moroni 10:3-5
            </div>
          )}
        </Motion>
        <button onClick={() => this.sideToSide()}>side to side</button>
      </div>
    );
  }
});

но мне было интересно, есть ли лучший / другой способ сделать это с помощью реактивного движения, кроме изменения состояния и передачи изменений в <Motion/>, Есть ли такая опция, как передача массива стилей, которые анимируются в такой последовательности (или что-то в этом роде)?

<Motion styles={[
  { marginLeft: '45px' },
  { marginLeft: '0px' },
  { marginLeft: '45px' },
  { marginLeft: '0px' },
  { marginLeft: '45px' },
  { marginLeft: '0px' }
]}>
 {...}
</Motion>