title: React.cloneElement clone already cloned element to add new props
body: <p>I have have <code>TestWrapper</code> component that clones <code>element</code> and is supposed to make the background blue. <code>Test</code> is also doing the same, but instead sets <code>color</code>. I was expecting the rendered element to have blue background and red text, but it is only <code>red</code>. Here is the example:</p>
  <pre><code>const Test: React.FC&lt;{ element: React.ReactElement }&gt; = ({ element }) =&gt; {
    return React.cloneElement(element, {
      const isSelected = useIsSelected();
      style: { ...element.props.style, color: isSelected ? 'red' : 'black' }
    });
  };
  
  const TestWrapper: React.FC&lt;{ element: React.ReactElement }&gt; = ({
    element
  }) =&gt; {
    // BackgroundColor is blue
    const { backgroundColor } = useTheme();
    return React.cloneElement(element, {
      style: { ...element.props.style, background: backgroundColor }
    });
  };
  
  export function App() {
    return &lt;TestWrapper element={&lt;Test element={&lt;h1&gt;Heading&lt;/h1&gt;} /&gt;} /&gt;;
  }
  </code></pre>
  <p>How can I achieve this? I could do this differently, but I have to be able to access hook methods from <code>Test</code> and <code>TestWrapper</code>.</p>
  <p>Simple codesandbox example: <a href="https://codesandbox.io/s/serene-bassi-ve1ym?file=/src/App.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/serene-bassi-ve1ym?file=/src/App.tsx</a></p>