title: React-spring animation only works at first render
body: <p>I try to animate new entries in an array as they appear with <code>react-spring</code> It works quite fine at the first render but then doesn't animate when updated</p>
  
  <p>Here's a code sandbox where I reproduced the issue with an interval : <a href="https://codesandbox.io/s/01672okvpl" rel="nofollow noreferrer">https://codesandbox.io/s/01672okvpl</a></p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import { Transition, animated, config } from "react-spring";
  
  import "./styles.css";
  
  class App extends React.Component {
    state = { fake: ["a", "b", "c", "d", "e", "f"] };
  
    fakeUpdates = () =&gt; {
      const [head, ...tail] = this.state.fake.reverse();
      this.setState({ fake: [...tail, head].reverse() });
    };
  
    componentDidMount() {
      setInterval(this.fakeUpdates, 2000);
    }
  
    componentWillUnmount() {
      clearInterval(this.fakeUpdates);
    }
  
    render() {
      const { fake } = this.state;
      return (
        &lt;div className="App"&gt;
          {fake.map((entry, index) =&gt; (
            &lt;Transition
              native
              from={{
                transform: `translateY(${index === 0 ? "-200%" : "-100%"})`
              }}
              to={{ transform: "translateY(0)" }}
              config={config.slow}
              key={index}
            &gt;
              {styles =&gt; &lt;animated.div style={styles}&gt;{entry}&lt;/animated.div&gt;}
            &lt;/Transition&gt;
          ))}
        &lt;/div&gt;
      );
    }
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <p>I tried with <code>Spring</code> and <code>Transition</code> with the same result.</p>