Why does my React form trigger 'onSubmit' when navigating back

Question

I have a React form with an onSubmit function. For some reason I need to have a back button on every page to prevent the onSubmit from triggering.

<div className={style.formHolder}>
  <form onSubmit={handleSubmit}>{displayPage()}</form>
</div>

displayPage() renders one of three pages. The first page doesn't have a back button.

  function displayPage() {
    switch (page) {
      case 1:
        return (
          <>
            <input />
            <button
                className={style.submitButton}
                type="submit"
                disabled={isSubmitting}
              >
                Save
            </button>
         </>);
      case 2:
        return (
          <>
             <input />
                           <button
                className={style.backButton}
                onClick={onBackClick}
                type="button"
              >
                Back
              </button>
              <button
                className={style.submitButton}
                type="submit"
                disabled={isSubmitting}
              >
                Save
              </button>
          </>);
    }};

Now from the second page if I click the back button:

  function onBackClick() {
    if (page > 1) {
      setPage(page - 1);
    } else {
      console.log(formData);
    }
  }

I will navigate back and the forms onSubmit will immediately trigger.

I can prevent the onSubmit from triggering by adding a back button to the first page.