Web component `ui-modal` in App Bridge doesn't work in RemixJS Shopify Template

[nxtdev]

I'm adding a modal to my app and noticed that the old Modal component in Polaris was deprecated so I checked out the `ui-modal` web component in App Bridge. I'm just trying this out and copy-pasted the code from docs but clicking any button under the `ui-title-bar` just crashes the entire app. Here's the code again that I copy-pasted from the docs to my Shopify-Remix template (with some React adjustments like onClick):

<ui-modal id="my-modal">
<p>Message</p>
<ui-title-bar title="Title">
<button variant="primary">Label</button>
<button onClick={() => document.getElementById('my-modal')!.hide()}>Label</button>
</ui-title-bar>
</ui-modal>

<button onClick={() => document.getElementById('my-modal')!.show()}>Open Modal</button> 

And what it's like clicking the Dialog buttons:

[BSSCommerce-HDL · Accepted solution]

Hi @nxtdev, For remix, you should use this: https://shopify.dev/docs/api/app-bridge-library/react-components/modal-component

[nxtdev]

Cool, thanks for pointing this out! I'm new to Remix, still figuring things out.