title: Is this a bug in React.cloneElement?
body: <p><a href="https://facebook.github.io/react/docs/react-api.html#cloneelement" rel="nofollow noreferrer">React's documentation</a> says:</p>
  <blockquote>
  <p>React.cloneElement() is almost equivalent to:</p>
  <p><code>&lt;element.type {...element.props} {...props}&gt;{children}&lt;/element.type&gt;</code></p>
  <p>However, it also preserves refs. This means that if you get a child with a ref on it, you won't accidentally steal it from your ancestor. You will get the same ref attached to your new element.</p>
  </blockquote>
  <p>So I made this small example:</p>
  <pre><code>import React, { Component, Children, cloneElement } from 'react';
  
  class Wrapper extends Component {
      render() {
          return cloneElement(Children.only(this.props.children), {
              ref: (ref) =&gt; {
                  console.log(&quot;wrapper&quot;, ref);
              },
          });
      }
  }
  
  const MyComponent = () =&gt;
      &lt;Wrapper&gt;
          &lt;div ref={ref =&gt; {
              console.log(&quot;original&quot;, ref);
          }}&gt;
              My content
          &lt;/div&gt;
      &lt;/Wrapper&gt;
  
  export default MyComponent;
  </code></pre>
  <p>(Fiddle: <a href="https://jsfiddle.net/pxho45um/" rel="nofollow noreferrer">https://jsfiddle.net/pxho45um/</a>)</p>
  <p>I thought rendering <code>MyComponent</code> would log both <code>&quot;wrapper&quot; &lt;div&gt;...&lt;/div&gt;</code> and <code>&quot;original&quot; &lt;div&gt;...&lt;/div&gt;</code>, but it seems like only the wrapper ref callback is called.</p>
  <p>Isn't this contrary to the documentation? Or what do the React team mean when they say &quot;if you get a child with a ref on it, you won't accidentally steal it from your ancestor&quot;?</p>