Ref conflict with other drag library

[Laxy317]

I'm using both react-photo-view and @dnd-kit/sortable on the same image, such as :

const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({ id: src })

return <PhotoView src={src} >
      <image src={src} ref={setNodeRef} {...listeners}>
    </PhotoView>

Both of them need to set ref, which cause the drag library invalid. Although I can add a div to fix it, but i think there will be a better solution, such as using react-merge-refs

[MinJieLiu]

In fact, we can use the useImperativeHandle API, welcome pr

[Laxy317]

In fact, we can use the useImperativeHandle API, welcome pr

I don't think useImperativeHandle is useful. The problem is caused by

// PhotoView.tsx
const originRef = useRef<HTMLElement>(null);

if (children) {
    return Children.only(cloneElement(children, { ...eventListeners, ref: originRef }));
  }

The originRef will reset the user settings, there doesn't seem to be a way to fix it with useImperativeHandle.

[MinJieLiu]

useImperativeHandle(children?.ref, () => originRef.current);

It works fine. I didn't test it carefully and if there were no bugs I released the version

[Laxy317]

OK，thanks