Build a multi-step form where client feedback and real validation never disagree

You are building a multi-step form using React Hook Form with Zod for validation. The schema is the single source of truth for what counts as valid — the instant per-field feedback the user sees while typing and the validation that runs at actual submission time must be provably the same rules, not two hand-maintained copies that can drift apart.

FORM STEPS
1) Account details (email, password, confirm password). 2) Company details (company name, size). 3) Billing (plan, start date, end date for a trial).

FIELD LIST
email (string, valid email), password (string, min 10 chars, one number), confirmPassword (string, must match password), companyName (string, required), planStartDate (date), planEndDate (date)

CROSS-FIELD RULES
confirmPassword must exactly match password; planEndDate must be strictly after planStartDate.

SUBMIT BEHAVIOR
On success, POST the combined payload and redirect to /welcome; on a server-side rejection (e.g., email already registered), show the error attached to the email field on step 1, even if the user is currently on step 3.

IMPLEMENTATION RULES
Define one Zod schema per step, and compose them into a single schema for final submission using a discriminated approach or .merge(), so a rule never has to be written twice for the per-step case and the whole-form case. Wire the schema to React Hook Form through zodResolver, and do not additionally hand-write field-level validate functions that duplicate a rule already expressed in the schema — every validation rule belongs in exactly one place. For cross-field rules — a confirmation field matching a password field, an end date that must fall after a start date — implement them with the schema's own .refine() or .superRefine(), attached to the specific field path via the second argument so the resulting error attaches to the right field and not to the form as a whole; a cross-field rule implemented instead as a scattered onChange handler comparing two field values manually is exactly the kind of duplicate logic this schema-first approach is meant to eliminate. Use React Hook Form's default uncontrolled-registration approach (register) for plain text and number fields to get its documented performance benefit of not re-rendering the whole form on every keystroke, and only use Controller for fields that genuinely need to be controlled — a third-party component that only accepts a value/onChange pair and has no ref-based API of its own. For the multi-step flow, validate only the current step's fields when the user clicks Next, using the appropriate schema slice, but validate the full combined schema at the final submission regardless of which step introduced a since-corrected error, so a user cannot bypass a rule by fixing it, going back, and resubmitting from a step where it now appears satisfied in isolation.

OUTPUT FORMAT
1. The per-step Zod schemas and the composed full-form schema.
2. The form component wiring, showing register usage, any Controller usage and why it was needed there specifically, and the step-by-step validation trigger.
3. The cross-field rule implementation, shown as real code attached to the correct field path.
4. Confirmation that no validation rule exists in more than one place across the client feedback and the submission path.