Which of the included styles should I choose when creating a new/edit form?

Question

I have two forms: edit and new. They have different headers and a different set of buttons.

I always get bogged down in style. Which is preferred and why? Examples are showing edit form.

// inside FormImpl we look at mode to display a different header.
// inside FromImpl we look for the presence of onCancelEdit to show the cancel button.
<Form 
  render={form => (
    <FormImpl form={form} mode="edit" onCancelEdit={handleCancelEdit} />
  )}
/>

// header is controlled outside the form
// buttons and header live outside FormImpl
// formId is passed to the <form /> inside FormImpl
<Form 
  render={form => (<>
    <h2>Edit</h2>
    <FormImpl form={form} formId="main" />
    <div>
      <button for="main" type="submit">Submit</button>
      <button onClick={handleCancelEdit}>Cancel</button>
    </div>
  </>)}
/>

// header is controlled outside the form
// slot the buttons, giving FormImpl the responsibility of placing them where needed. 
<Form 
  render={form => (<>
    <h2>Edit</h2>
    <FormImpl 
      form={form} 
      buttons={
        <div>
          <button type="submit">Submit</button>
          <button onClick={handleCancelEdit}>Cancel</button>
        </div>
      }
  </>)}
/>

I've tried all three. This pattern comes up a lot and it's not always clear what to use. I'm using this as a learning exercise.