Polaris Tabs not rendering as expected inside of app bridge modal

I am working on migrating to the app bridge Max Modal to render full screen views. I’m facing a strange issue where the Tab component only renders the second button that is defined. This second button takes up 90% of the width and the rest 10% is covered by the default disclosureText with a dropdown icon that does not work when clicking on it. (Attaching screenshots of this). When I attempt to resize the window the tabs immediately fix itself and the correct buttons are displayed and the functionality is restored as well.

I have a very simple implementation:

    import { Tabs } from "@shopify/polaris"
    import { Modal, TitleBar } from '@shopify/app-bridge-react'

    tabs = [
      {
        id: 'button',
        content: "Button",
        panelID: 'button',
      },
      {
        id: 'form',
        content: "form",
        panelID: 'form',
      },
    ]
  
    tabPanels = [
      (
        <div>
          <h1>Button</h1>
        </div>
      ),
      (
        <div>
          <h1>Form</h1>
        </div>
      )
    ]

    const fullScreenModalMarkup = (
      <Modal
        open={true}
        variant="max"
        id="full-screen-modal"
      >
        <TitleBar title="Full screen modal">
        </TitleBar>
        <Tabs tabs={this.tabs} selected={selectedTabIndex} onSelect={this.handleSelectedTabIndexChange}>
          {this.tabPanels[selectedTabIndex]}
        </Tabs>
      </Modal>
    )

Any ideas on what could be the issue here?
TIA!

1st screenshot is the issue im seeing when the modal loads in.
2nd screenshot is the tabs fixing itself after I resize the window by a bit.