title: Using react-spring, AnimatedFoo = animated(Foo) doesn't work -- or how to animate a Component?
body: <p>In <a href="https://react-spring.io/basics" rel="nofollow noreferrer">react-spring Basics page</a>:</p>
  <pre class="lang-js prettyprint-override"><code>const AnimatedDonut = animated(Donut)
  </code></pre>
  <p>because I think <code>&lt;animated.div&gt;</code> can work, but <code>&lt;animated.Donut&gt;</code> doesn't work.</p>
  <p>So I tried:</p>
  <p><a href="https://codesandbox.io/s/weathered-breeze-ghdse" rel="nofollow noreferrer">https://codesandbox.io/s/weathered-breeze-ghdse</a></p>
  <pre><code>
  const AnimatedFoo = animated(Foo);
  // ....
  
  return &lt;AnimatedFoo style={props}&gt;I will fade in&lt;/AnimatedFoo&gt;;
  </code></pre>
  <p>but it doesn't animated.  Is it supposed to be the way it works?</p>