title: react-spring single-component mount/unmount reveals
body: <p>i'm trying to create animation when component mount/unmount with React-spring:</p>
  
  <pre><code>    import { Transition, animated } from 'react-spring'
      ...
  
      export class CompName extends PureComponent&lt;CompNamePropsType&gt; {
        static defaultProps = {
          isExpanded: false,
        }
  
        render() {
          const {
            isExpanded,
            ...props
          } = this.props
  
      return (
        &lt;section className={styles.block} {...props}&gt;
          &lt;Transition
            from={{ opacity: 0 }}
            enter={{ opacity: 1 }}
            leave={{ opacity: 0 }}&gt;
          {isExpanded &amp;&amp; (style =&gt; (
             &lt;animated.div style={{ ...style, background: "orange" }}&gt;
               &lt;AnotherComp /&gt;
             &lt;/animated.div&gt;
          ))}
         &lt;/Transition&gt;
        &lt;/section&gt;
      )
    }
  }
  </code></pre>
  
  <p>But this is just does not work and i got an error <code>children is not a function</code>. What i did wrong, and how can i create animation on component mount/unmount with react-spring  wrapper?</p>