How to prevent submit in nested form

I have a nested form that looks like this

//this is the form
<form>

// this for quick add functionality and display the data from the form above
<form>
</form>

</form>

The problem I have is when the children submit the data, it also trigger the submit from the parent, is there any way to prevent this from happening. P/S: also, how to trigger submit form <button>, something like <button onClick={() => handleSubmit()}>submit</button>

Thanks

[vikas26294]

I also ran into same issue. I was able to solve it by modifying my submit function to

  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    // this part is for stopping parent forms to trigger their submit
    if (event) {
      // sometimes not true, e.g. React Native
      if (typeof event.preventDefault === 'function') {
        event.preventDefault();
      }
      if (typeof event.stopPropagation === 'function') {
        // prevent any outer forms from receiving the event too
        event.stopPropagation();
      }
    }

    return formHandlers.handleSubmit(async (values) => {
       // your code can go here
    })(event);
  };

[gaozhidf]

e.stopPropagation() can stop submit from nested form

<Form>
  <Form onSubmit={e => {
    e.preventDefault();
    // your code
    e.stopPropagation();
  }} >
  </Form>
</Form>