How do I put this google dialogflow code into a typescript react app?

Google Dialog flow has this code snippet for integrating your chatbot into an html page.

<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger
  intent="WELCOME"
  chat-title="FirstTest"
  agent-id="xxxxxxxxxxx"
  language-code="en"
></df-messenger>

I feel like this should easily be implemented similarly to how you can implements aws kendra component into a tsx file like this

<Search
        kendra={kendra}
        s3={s3}
        indexId={indexId}
        facetConfiguration={facetConfiguration}
        />

This works but the google dialog flow snippet doesn't work.

from How do I put this google dialogflow code into a typescript react app?