Based on the awesome Learn Next.js tutorial I’m using multiple DeleteButtons and a CreateButton component on a page:

import { deleteInvoice, createInvoice } from "@/app/lib/actions";

const DeleteButton = ({ id }: { id: number }) => {
  const deleteInvoiceWithId = deleteInvoice.bind(null, id);

  return (
    <form action={deleteInvoiceWithId}>
      <button type="submit">
        Delete
      </button>
    </form>
  );
};

const CreateButton = () => {
  return (
    <form action={createInvoice}>
      <button type="submit">
        Create
      </button>
    </form>
  );
};

Why do I get the following error-throwing code in the forms action property after submitting one of the forms?

<form action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"><button type="submit">Delete</button></form>