How to access the DOM element of a third party component that doesn't forward ref

Question

I am working with a third-party component which doesn't forward the ref to its DOM component and unfortunately, I need to get a ref to its DOM element in my code.

The code below obviously fails:

const ThirdPartyComponent = (props) => {
  return <div>I'm a third party component</div>;
};

const MyComponent = () => {
  const ref = useRef();

  return <ThirdPartyComponent ref={ref} />;
};

"Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"

See codesandbox here.

Is there anyway to get a ref to the DOM element inside the third party component? I'm aware of the deprecated findDOMNode API. I'm not too keen on it, but even though, I did not manage to make it work.

Note: I know that what I'm asking for is not considered as good practice. The reason I'm doing this is to have react-beautiful-dnd work with DevExtreme's Reactive Grid. Draggable components expects a ref to the draggable elements (the <tr>s here, which I don't have). Just trying to simplify the question.

Durwin

Try using a wrapper component – Cuspidation

That was my initial workaround. But in the actual use case, the element is a TR, and TRs can't be wrapped in another element 😢 – Durwin