Multi-step Form with State Machine

import { createMachine, assign } from "xstate";

const formMachine = createMachine({
  id: "form",
  initial: "step1",
  context: { email: "", amount: 0 },
  states: {
    step1: {
      on: {
        NEXT: {
          target: "step2",
          guard: ({ context }) => context.email.includes("@"),
          actions: assign({ email: (_, e) => e.email }),
        },
      },
    },
    step2: {
      on: {
        SUBMIT: "submitting",
        BACK:   "step1",
      },
    },
    submitting: { type: "final" },
  },
});