How to implement tooltips in React for svg path coming from server?

Question

React

Hello! Please help me complete the task. Let's say svg comes from the server, all paths of which contain the data-name attribute. Further manipulations are planned with this attribute. All paths that contain the data-name attribute must have the tippy.js library tooltip attached . As I understand it, the @tippyjs/react lib is not applicable for path in this case, since they come from the server in the form of html. But if you put a component in the content, it will return [object Object], because tippy.js is a vanilla lib and cannot render JSX. Please help!

You can try to solve with @tippyjs/react , but I don't know how to wrap path in HOC, as suggested by @tippyjs/react
it's not possible to wrap plain html in HOC. Svg comes from the server as an html string

https://codesandbox.io/s/hidden-cache-4gmqv?file=/...