How to remotely submit Atlaskit Form as Container of a modal dialog?

I have a page where I have a Modal Dialog inside a big form, and my Modal Dialog is an inner form.

    <Modal /> (as a Form)

I follow the example here to make my Dialog a form.

The problem is when I click the submit button of the Dialog, the outer form is also getting submit.
So how can I submit the Modal Dialog Form without submitting the outer form?


An example of working code:

const App = () => {
  let formRef = useRef();

  const remotelySubmitForm = () => {
    const form = document.getElementById('myFormId');

    // HTML5 form validity
    if (!form.checkValidity()) {

    /* Dispatch form submit event to continue with Atlaskit Field custom
     * validation and submit if they are all valid */
    formRef.current.dispatchEvent(new Event('submit', { cancelable: true }));

  return (
      <Button type="button" onClick={remotelySubmitForm}>
        Submit From Outside
      <Form onSubmit={(data) => console.log(data)}>
        {({ formProps }) => {
          formRef = formProps.ref;
          return (
            <form {...formProps} id="myFormId">
              <Field name="html5" label="HTML5 Validation" isRequired>
                {({ fieldProps }) => <TextField {...fieldProps} />}