title: React.CloneElement returning an object instead of function
body: <p>I am having a hard time understanding the behaviour of <code>React.cloneElement()</code> function</p>
  
  <p>I have my Component Structure something like this</p>
  
  <p>A.js</p>
  
  <pre><code>export default class A extends React.Component {
       render() {
           return (&lt;h1&gt;{ this.props.message }&lt;/h1&gt;)
       }
   }
  </code></pre>
  
  <p>B.js</p>
  
  <pre><code>import A from "./A"
  
  const newComponent = React.cloneElement(A,{
      message: "Hello World"
  })
  
  export default newComponent
  </code></pre>
  
  <p>C.js</p>
  
  <pre><code>import B from "./B"
  import { BrowserRouter as Router, Route } from "react-router-dom"
  
  // To Be very precise
   export default class C extends React.Component {
       render() {
           return (
               &lt;Router&gt;
                  &lt;Route path="/" component={B}  /&gt;
              &lt;/Router&gt;
           )
       }
   }
  </code></pre>
  
  <p>But I get this Error</p>
  
  <p><em>Invalid prop <code>component</code> of type <code>object</code> supplied to <code>Route</code>, expected <code>function</code>.</em> </p>
  
  <p>but When I pass Component <code>A</code> directly into the <code>Route</code> component, it renders fine.</p>
  
  <p>When I <code>console.log</code> Component <code>A</code> inside the render function of Component <code>C</code>, I get a function but 
  When I <code>console.log</code> Component <code>B</code> inside the render function of Component <code>C</code>, I get a object</p>
  
  <p>What am I missing?</p>