Passing JSX into dangerouslySetInnerHtml - React

Question

Background

I am working on a React application. I need to place some HTTML inside a div. But I need to pass a tooltip package inside the HTML I pass. I want to eventually only have the tooltip trigger on certain words. For now, I just want the package to show up when I wrap the entire html element string

Code

I basically want to do this

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

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

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

Problem

This renders [object Object]

I would like to render the text surrounded by the tooltip instead.