title: React pose state affects child component poses
body: <p>I'm trying to create a component in react which collapses and expands when required. For this, I am using react-pose. However, I'm encountering problems when trying to nest multiple of this component.</p>
  
  <p>Here's how I define my component:</p>
  
  <pre><code>const CollapsableDiv = posed.div({
    show: {
      height: 'auto',
      overflow: 'hidden'
    },
    hide: {
      height: '0px',
      overflow: 'hidden'
    }
  });
  </code></pre>
  
  <p>And here's where I use it.</p>
  
  <pre><code>class App extends React.Component {
    state = { 
      showing: false, 
      showingInner: false 
    };
  
    toggleShow = () =&gt; this.setState({
      showing: !this.state.showing
    });
  
    toggleInner = () =&gt; this.setState({
      showingInner: !this.state.showingInner
    });
  
    render() {
      return (
        &lt;React.Fragment&gt;
          &lt;button onClick={this.toggleShow}&gt;
            {this.state.showing?'Hide':'Show'}
          &lt;/button&gt;
          &lt;CollapsableDiv pose={ this.state.showing ? 'show' : 'hide' }&gt;
            &lt;div&gt;
              This is some content
              &lt;button onClick={this.toggleInner}&gt;
                {this.state.showingInner ? 'Hide' : 'Show'}
              &lt;/button&gt;
              &lt;CollapsableDiv pose={this.state.showingInner ? 'show' : 'hide'}&gt;
                &lt;div&gt;
                  This is some inner content    
                &lt;/div&gt;
              &lt;/CollapsableDiv&gt;
            &lt;/div&gt;
          &lt;/CollapsableDiv&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  </code></pre>
  
  <p>The problem I have is that the outer <code>&lt;CollapsableDiv&gt;</code> "pose" seems to be passed to the inner one meaning that when you expand the outer div the inner one also expands. The inner <code>&lt;CollapsableDiv&gt;</code> does not seem to have the same influence on the outer one. </p>
  
  <p>Here's an example of the issue <a href="https://codesandbox.io/s/x7nljvom9z?fontsize=14" rel="nofollow noreferrer">https://codesandbox.io/s/x7nljvom9z?fontsize=14</a></p>
  
  <p>Am I doing something wrong here? Is it not possible to re-use the same component?</p>