Cant use ref over nested components

[JoaquinDelPrado]

im trying to use nodeRef to handle my draggable component but i get a bad manner on it. Here is a basic example of my code:

<Draggable axis="y" nodeRef={draggableRef}>
   <div>
     <div ref={draggableRef}>
        Click here to drag the component!! 
     </div>
  <div>
</Draggable>

[bo-carey]

Having the same issue. Using ref on nested elements makes dragging very choppy.

<Draggable nodeRef={handler}>
    <div id="window">
        <div id="header" ref={handler}></div>
        <div id="body"></div>
    </div>
</Draggable>

*note that I am using a class component so I use const handler = createRef(null); instead of useRef

[JoaquinDelPrado]

thanks for your approach @jellyfith!! i'll try your way

[sseagull]

@JoaquinDelPrado what was your solution to this problem. I'm experiencing the choppy drag behavior when using nodeRef on any child div of the Draggable component.

[kroussea]

@JoaquinDelPrado I'm facing the same issue, how did you resolve it on your end?

[wuarmin]

I have the same issue. I want to use nodeRef on nested handler, but then the dragging is very choppy. @STRML Do you know the reason. How can we fix this?