Issue with app bridge modal snippet with select

modal.tsx

import { Button, Frame, Page, Select, Text } from '@shopify/polaris'
import polarisStyles from '@shopify/polaris/build/esm/styles.css'
import { useCallback, useMemo, useState } from 'react'
import { AppProvider } from '@shopify/shopify-app-remix/react'
import { json, LoaderFunctionArgs } from '@remix-run/node'
import { env } from '~/env.server'
import { useLoaderData } from '@remix-run/react'

export async function loader({ request }: LoaderFunctionArgs) {
  return json({ apiKey: env.SHOPIFY_API_KEY || '' })
}

export const links = () => [{ rel: 'stylesheet', href: polarisStyles }]

export default function TestPage() {
  const apiKey = useLoaderData<typeof loader>().apiKey
  const [selectedValue, setSelectedValue] = useState('option1')
  const options = useMemo(
    () => [
      { label: 'Option 1', value: 'option1' },
      { label: 'Option 2', value: 'option2' },
      { label: 'Option 3', value: 'option3' }
    ],
    []
  )
  const show = useCallback(() => {
    alert(`Select Value: ${selectedValue}`)
  }, [selectedValue])
  const toggleModal = useCallback(() => {
    // @ts-ignore
    shopify.modal.toggle('test-modal')
  }, [])
  return (
    <AppProvider apiKey={apiKey}>
      <Frame>
        <Page fullWidth>
          <Button onClick={toggleModal}>Open modal to view Select</Button>
          <Text as={'p'}>Select value: {selectedValue}</Text>
          <ui-modal id={'test-modal'}>
            <Select
              label={'Non Working Select'}
              options={options}
              onChange={(value) => setSelectedValue(value)}
              value={selectedValue}
            />
            <ui-title-bar title={'Test Modal'}>
              <button variant="primary" onClick={show}>
                Show
              </button>
              <button onClick={toggleModal}>Cancel</button>
            </ui-title-bar>
          </ui-modal>
        </Page>
      </Frame>
    </AppProvider>
  )
}