fix: harden array primitive case

packages/fiber/src/core/renderer.ts

@@ -31,6 +31,7 @@ export type LocalState = {
   attach?: AttachType
   previousAttach: any
   memoizedProps: { [key: string]: any }
+  autoRemovedBeforeAppend?: boolean
 }
 
 export type AttachFnType = (parent: Instance, self: Instance) => () => void
@@ -271,8 +272,16 @@ function createRenderer<TCanvas>(_roots: Map<TCanvas, Root>, _getEventPriority?:
     instance.__r3f.objects.forEach((child) => appendChild(newInstance, child))
     instance.__r3f.objects = []
 
-    insertBefore(parent, newInstance, instance)
-    removeChild(parent, instance)
+    const autoRemovedBeforeAppend = !!newInstance.parent
+
+    if (!instance.__r3f.autoRemovedBeforeAppend) {
+      insertBefore(parent, newInstance, instance)
+      removeChild(parent, instance)
+    } else {
+      appendChild(parent, newInstance)
+    }
+
+    newInstance.__r3f.autoRemovedBeforeAppend = autoRemovedBeforeAppend
 
     // Re-bind event handlers
     if (newInstance.raycast && newInstance.__r3f.eventCount) {

packages/fiber/tests/core/renderer.test.tsx

@@ -500,16 +500,16 @@ describe('renderer', () => {
 
   it('can swap 4 array primitives', async () => {
     let state: RootState = null!
-    const a = Object.assign(new THREE.Group(), { name: 'a' })
-    const b = Object.assign(new THREE.Group(), { name: 'b' })
-    const c = Object.assign(new THREE.Group(), { name: 'c' })
-    const d = Object.assign(new THREE.Group(), { name: 'd' })
+    const a = new THREE.Group()
+    const b = new THREE.Group()
+    const c = new THREE.Group()
+    const d = new THREE.Group()
     const array = [a, b, c, d]
 
     const Test = ({ array }: { array: THREE.Group[] }) => (
       <>
-        {array.map((group) => (
-          <primitive key={group.name} object={group} />
+        {array.map((group, i) => (
+          <primitive key={i} object={group} />
         ))}
       </>
     )