How to (properly) reparent an object?

Questions
1

I’ve got a few pens. The first one looks as expected (there is no change in the rotation pattern of the box), but in the second and third pens the rotation changes suddenly (unexpectedly) when the reparenting is done in steps at different times. How do we properly re-parent the box (f.e. so that the rotation stays as expected)? Why does this happen?

  1. first one (works as expected)
  2. second one (doesn’t work, rotation is messed up)
  3. third one (doesn’t work, rotation is messed up)

The only difference between the pens is near line 25: the difference being the use of one, two, or three setTimeouts to reparent the box at different times.

The parts of the code that are different look like this:

1:

setTimeout(() => {
    THREE.SceneUtils.detach( mesh, root, scene )
    console.log('detached')
    THREE.SceneUtils.attach( mesh, scene, wayOff )
    console.log('attached')
    
    THREE.SceneUtils.detach( mesh, wayOff, scene )
    console.log('detached')
    THREE.SceneUtils.attach( mesh, scene, wayOff2 )
    console.log('attached')
}, 2000)

2:

setTimeout(() => {
    THREE.SceneUtils.detach( mesh, root, scene )
    console.log('detached')
    THREE.SceneUtils.attach( mesh, scene, wayOff )
    console.log('attached')
}, 2000)

setTimeout(() => {
    THREE.SceneUtils.detach( mesh, wayOff, scene )
    console.log('detached')
    THREE.SceneUtils.attach( mesh, scene, wayOff2 )
    console.log('attached')
}, 4000)

3:

setTimeout(() => {
    THREE.SceneUtils.detach( mesh, root, scene )
    console.log('detached')
}, 1000)
setTimeout(() => {
    THREE.SceneUtils.attach( mesh, scene, wayOff )
    console.log('attached')
}, 2000)

setTimeout(() => {
    THREE.SceneUtils.detach( mesh, wayOff, scene )
    console.log('detached')
}, 3000)
setTimeout(() => {
    THREE.SceneUtils.attach( mesh, scene, wayOff2 )
    console.log('attached')
}, 4000)