title: React animate leaving div content
body: <p>I'm using React and React-Spring to animate a questionnaire app.
  I want the questionnaire to animate the leaving/enter of a question when the user answer one.</p>
  <p>I'm using React for the app and try to use React-Spring to animate the transitions. The issue is that when the user is answering a question, the question component is updated with the new content before it leaving.</p>
  <p>To simplify it, the Question component look like this:</p>
  <pre class="lang-js prettyprint-override"><code>export default function Question({question, onAnswer}) {
      const [answer, setAnswer] = useState(null);
      return (
          &lt;animated.div ...&gt;
              {question.title}
              &lt;select&gt;...{quesiton.options}...&lt;/select&gt;
              &lt;button onClick={() =&gt; onAnswer(question.id, answer)}&gt;Next&lt;/button&gt;
          &lt;/animated.div&gt;
      );
  }
  </code></pre>
  <p>I create a Code Sandbox that illustrates my issue:
  <a href="https://codesandbox.io/s/nostalgic-swartz-lhkj0?file=/src/AnimatedComponent.js" rel="nofollow noreferrer">https://codesandbox.io/s/nostalgic-swartz-lhkj0?file=/src/AnimatedComponent.js</a></p>
  <p>How should I handle this? couldn't find any example on the web</p>
  <p>Thanks!</p>