Передача JSX в опасныйSetInnerHtml - React

Question

Задний план

Я работаю над приложением React. Мне нужно разместить HTTML внутри div. Но мне нужно передать пакет всплывающей подсказки внутри передаваемого HTML-кода. Я хочу, чтобы всплывающая подсказка появлялась только для определенных слов. На данный момент я просто хочу, чтобы пакет отображался, когда я оборачиваю всю строку элемента html

Код

Я в основном хочу это сделать

      import Tippy from '@tippy.js/react';

const App = () => {
   const myHtmlString = '<p>Hi</p>`; 
   const text = <Tippy content={myHtmlString} />; 

   return (
       <div dangerouslySetInnerHtml={{ __html: text }} />
   )
}

Проблема

Это отображает [объект Object]

Вместо этого я хотел бы визуализировать текст, окруженный всплывающей подсказкой.