React-Motion - Forced to hold button for spring animation

I'm trying to animate these two inputs to the right by 400 pixels and I've copied this pretty much word from word from the demo, but I'm forced to hold the button I've tied the animation to, and I'm not sure why. I was wondering if you guys could shed some light on what's causing that. I'm very new to react, thank you.

import React, { Component } from 'react';
import {Motion, spring} from 'react-motion';


class LoginComponent extends Component {

  constructor(props) {
    super(props);
    this.state = {open: false};
  };

  handleMouseDown = () => {
    this.setState({open: !this.state.open});
  };

  handleTouchStart = (e) => {
    e.preventDefault();
    this.handleMouseDown();
  };

  render() {
    return (
        <form className="LoginForm">
          <Motion style={{x: spring(this.state.open ? 400 : 0)}}>
                    {({x}) =>
                    <div>
                      <input placeholder="Username" style={{
                        WebkitTransform: `translate3d(${x}px, 0, 0)`,
                        transform: `translate3d(${x}px, 0, 0)`,
                      }} />

                      <input placeholder="Password" style={{
                        WebkitTransform: `translate3d(${x}px, 0, 0)`,
                        transform: `translate3d(${x}px, 0, 0)`,
                      }} />
                    </div>
                    }
          </Motion>
          <button><h2> Log In </h2></button>
          <button onMouseDown={this.handleMouseDown.bind(this)} onTouchStart={this.handleTouchStart.bind(this)}> <h2> Sign Up </h2></button>


        </form>
    );
  }
}

export default LoginComponent;

try using onClick instead of onMouseDown on Sign Up button.

the onMouseDown event toggles your open state to its previous state false onMouseUp