<p dir="auto">React version: 17.0.2</p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div
    ref={rootRef}
    className=&quot;rate&quot;
    onTouchMove={onTouchMove}
&gt;
    {
        cloneElement(full ? fullIcon : voidIcon, {
            className: classNames(&quot;rate__icon&quot;, {
                &quot;rate__icon--full&quot;: full,
            }),
        })
    }
&lt;/div&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">div</span>
    <span class="pl-c1">ref</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">rootRef</span><span class="pl-kos">}</span>
    <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"rate"</span>
    <span class="pl-c1">onTouchMove</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">onTouchMove</span><span class="pl-kos">}</span>
<span class="pl-c1">&gt;</span>
    <span class="pl-kos">{</span>
        <span class="pl-en">cloneElement</span><span class="pl-kos">(</span><span class="pl-s1">full</span> ? <span class="pl-s1">fullIcon</span> : <span class="pl-s1">voidIcon</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
            <span class="pl-c1">className</span>: <span class="pl-en">classNames</span><span class="pl-kos">(</span><span class="pl-s">"rate__icon"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
                <span class="pl-s">"rate__icon--full"</span>: <span class="pl-s1">full</span><span class="pl-kos">,</span>
            <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">Codesandbox：<a href="https://codesandbox.io/s/quiet-meadow-rfq1m" rel="nofollow">https://codesandbox.io/s/quiet-meadow-rfq1m</a></p>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">When a cloneElement conditionally switches components, the onTouchMove is invalid</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">When a cloneElement conditionally switches components, the onTouchMove should work</p>
<p dir="auto">My project uses react, react-dom, and react-bootstrap.<br>
react-bootstrap requires react to be a peer dependency.<br>
react-dom includes react as a child dependency.<br>
So I must install react as a top-level dependency in order for react-bootstrap to work.<br>
Now I have two copies of react.<br>
When I try to use the Modal component in react-bootstrap, I get the error "Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's <code class="notranslate">render</code> method, or you have multiple copies of React loaded".<br>
I can fix this by deleting the directory node_modules/react-dom/node_modules/react.<br>
Maybe react-dom should be changed so react is a peer dependency instead of a child dependency.</p>