title: Adding HTML to a React Three Drei 'Instance'
body: <p>I've been looking at this example here:
  <a href="https://codesandbox.io/s/floating-instanced-shoes-h8o2d?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/floating-instanced-shoes-h8o2d?file=/src/App.js</a></p>
  <p>Which uses <code>&lt;Instances&gt;&lt;Instance&gt;</code> from React Three Drei..</p>
  <p>The docs: <a href="https://github.com/pmndrs/drei#performance" rel="nofollow noreferrer">https://github.com/pmndrs/drei#performance</a> say that html can be passed over inside an instance like so:</p>
  <pre><code>&lt;Instance&gt;
    &lt;Html&gt;hello from the dom&lt;/Html&gt;
  &lt;/Instance&gt;
  </code></pre>
  <p>However, in the shoes example, if I pass like this (<code>Html</code> needs to be imported from Drei library):</p>
  <pre><code>import { Html, Instances, Instance, OrbitControls, Environment, useGLTF } from '@react-three/drei'
  
  ...
  
    return (
      &lt;group {...props}&gt;
        &lt;Instance ref={ref} onPointerOver={(e) =&gt; (e.stopPropagation(), setHover(true))} onPointerOut={(e) =&gt; setHover(false)}&gt; 
          &lt;Html&gt;Hello from the DOm&lt;/Html&gt;
        &lt;/Instance&gt;
      &lt;/group&gt;
    )
  </code></pre>
  <p>The html keeps getting added recursively (watch out if you try it).</p>
  <p>Is there any way to make sure it gets added 1 time for each item, or will I need to refactor the whole example to use <code>&lt;mesh&gt;</code> or something instead of <code>&lt;Instance&gt;</code>?</p>