Why does this not animate?

spring.jsx

import React, { Component } from "react";
import { Transition } from "react-spring";
import "./App.css";

class App extends Component {
  state = {
    items: [1, 2, 3],
    toggleDiv: false
  };
  render() {
    return (
      <div id="root">
        <header className="App-header">
          <div>Hello</div>
          <Transition
            items={this.state.items}
            keys={item => item}
            from={{ transform: "translate3d(0,-40px,0)" }}
            enter={{ transform: "translate3d(0,0px,0)" }}
            leave={{ transform: "translate3d(0,-40px,0)" }}
            trail={20}
          >
            {item =>
              this.state.toggleDiv && (props => <div style={props}>{item}</div>)
            }
          </Transition>

          <button onClick={() => this.setState({ toggleDiv: true })}>
            Hej
          </button>
        </header>
      </div>
    );
  }
}

export default App;