Modal React component not working as expected.

[Wakil_eFoli]

When using the shopify app bridge Modal component the close("x") button at the top doesn't work.

Here's the link to the doc. 

import {Modal, TitleBar, useAppBridge} from '@shopify/app-bridge-react';

export function MyModal() {
  const shopify = useAppBridge();

  return (
    <>
      <button onClick={() => shopify.modal.show('my-modal')}>Open Modal</button>
      <Modal id="my-modal">
        <p>Message</p>
        <TitleBar title="Title">
          <button variant="primary">Label</button>
          <button onClick={() => shopify.modal.hide('my-modal')}>Label</button>
        </TitleBar>
      </Modal>
    </>
  );
}

More over can you explain why the primary and secondary action button clicks submit the form?