Multi-Step Form

Build a three-step wizard as a single React component: Account (email + password), Profile (name + role), then a read-only Review with a Submit button. A progress bar and a "Step X of 3" label track where you are, Next validates the current step before advancing, and Back returns without validating — all while keeping the data the user has already typed.

What you'll build

The starter App.tsx renders step 1 in its resting state. Make the wizard work:

1. One source of truth. Track the current step (1–3) and a single form object holding every field across all steps, plus an errors object.
2. Render the current step. Show only the active step's fields; bind each input's value to form so switching steps never loses data.
3. Gate Next. On Next, validate the current step's required fields. If it fails, show inline errors and stay; if it passes, advance.
4. Back is free. It steps backward with no validation.
5. Review and submit. Step 3 is a read-only summary; Submit shows a "Submitted!" success state.

Examples

• On step 1 with an empty email, clicking Next shows "Email is required" and the step does not change.
• Fill both fields, click Next to reach Profile, click Back — the email and password you typed are still there.
• On Review, Submit replaces the form with the success message and fills all three progress segments.

Notes

• Keep one form object, not a separate useState per field — it makes "preserve data across steps" automatic.
• Validation is per-step, driven by the current step; only the visible step's fields are checked.
• errors is derived on demand (computed in next()), not a field you keep permanently in sync.
• Styling (progress bar, inputs, buttons) is already in styles.css; focus on the state and flow.