Multi step forms with SvelteKit and actions

+page.server.js

export const actions = {
  first: async ({ request }) => {
    const data = Object.fromEntries(await request.formData());
    console.log('first', data);
    return {
      data,
      step: 2
    };
  },
  second: async ({ request }) => {
    const data = Object.fromEntries(await request.formData());
    console.log('second', data);
    return {
      data,
      step: 3
    };
  },
  third: async ({ request }) => {
    const data = Object.fromEntries(await request.formData());
    console.log('third', data);
    // final step no return or whatever
  }
};

+page.svelte

<script>
  import { enhance } from '$app/forms';
  export let form;
  $: form_so_far = form?.data ?? {};
  $: step = form?.step ?? 1;
</script>

{#if step == 1}
  <form method="POST" action="?/first" use:enhance>
    <label>
      <span>Name</span>
      <input name="name" value="Rainlife" />
    </label>
    <button>Next</button>
  </form>
{:else if step == 2}
  <form method="POST" action="?/second" use:enhance>
    {#each Object.entries(form_so_far) as [key, value]}
      <input type="hidden" name={key} {value} />
    {/each}
    <label>
      <span>Address</span>
      <input name="addres" value="123" />
    </label>
    <button>Next</button>
  </form>
{:else if step == 3}
  <form method="POST" action="?/third" use:enhance>
    {#each Object.entries(form_so_far) as [key, value]}
      <input type="hidden" name={key} {value} />
    {/each}
    <label>
      <span>Discord Handle</span>
      <input name="discord" value="@Rainlife" />
    </label>
    <button>Next</button>
  </form>
{/if}