title: React copy-to-clipboard not trigering
body: <p>I have the following element:</p>
  
  <pre><code>&lt;CopyToClipboard text={color.color}&gt;
      &lt;ColorBox 
         numberOfShades={this.props.numberOfShades} 
         color={color.color} 
         name={color.colorName}
         copy={this.state.copied}
         luminanceLevel={this.state.luminanceSlider} 
         colorFormat={this.state.colorFormat}
      &gt;
          &lt;StyledLink to={{
                 pathname: `/shades/${this.props.name}`,
                      state: {
                                color: this.props.color
                              }
           }}&gt;More&lt;/StyledLink&gt;
      &lt;/ColorBox&gt;
  &lt;/CopyToClipboard&gt;
  </code></pre>
  
  <p>The <code>&lt;CopyToClipboard&gt;</code> is in the React tree with the right text but it doesn't copy when I click in the element.</p>
  
  <p>The child element is:</p>
  
  <pre><code>function ColorBox(props){
      return(
              &lt;StyledColorBox color={props.color}&gt;
                  {props.copy &amp;&amp;
                      &lt;BoxOverlay
                          colorOverlay={props.color}
                      &gt;
                          &lt;CopiedSign&gt;Copied!&lt;/CopiedSign&gt;
                      &lt;/BoxOverlay&gt;
                  }
  
  
                  {props.name &amp;&amp;
                      &lt;ColorName&gt;{props.name}&lt;/ColorName&gt;
                  }
                  {props.children}
  
              &lt;/StyledColorBox&gt;
      )
  }
  </code></pre>
  
  <p>When I use <code>&lt;CopyToClipboard&gt;</code> inside the child element it works. Anyone knows what is happening?</p>