How to do animated side to side motion with react-motion

Question

I want to make a div go from side to side 3 times after clicking a button. I can accomplish it using the code below. jsfiddle here

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>
    );
  }
});

but I was wondering if there was a better/different way to do this with react-motion besides changing state and passing the changes to <Motion/>. Is there an option like passing an array of styles that animate in sequence like this (or something like it)?

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