DragControls Not Functioning Correctly

[AshhadDevLab]

• three: 0.164.1
• @react-three/fiber: 8.16.6
• @react-three/drei: 9.105.6
• node: 21.5.0
• npm: 10.2.4

Problem description:

I am facing two issues with the DragControls component from @react-three/drei.

1. Console Output Discrepancy:
   When I attach a ref to the DragControls or console.log the DragControls, the output is not as expected. Here is the output I receive:

In contrast, performing the same action with DragControls in vanilla three.js yields the expected methods and properties:

2. Non-modifiable Recursive Property and Incorrect Drag Behavior:
   The recursive property of DragControls in the @react-three/fiber implementation cannot be modified. Additionally, when attempting to drag an object that is behind another object, the control behaves incorrectly by dragging all objects behind it, rather than the front-most object. This behavior mimics a raycaster .intersectObjects instead of the expected drag behavior. Also I dont understand the snapping of the objects kinda back to their original position.

Screen.Recording.2024-06-15.at.2.17.03.PM.mov

I am unsure if these are bugs or if I am missing some implementation details, but any help regarding these issues would be appreciated.

Relevant code:

CodeSandbox

Suggested solution:

I think there should be an individual prop for recursive and other properties inside of the React component. Additionally, when the ref is consoled, it should output the properties, the current state, and include the prototype and constructors of the DragControls.