Back button/navigation between steps functions correctly

Shoppers fix mistakes by going back. If the back button is missing from the payment step, a shopper who notices a wrong shipping address has to abandon and start over. Worse, if back navigation clears form data, every mistake forces re-entry of twenty-plus fields. Both behaviors drive abandonment on an otherwise-committed buyer. The underlying bug is almost always state being scoped to the step component instead of the checkout container.

Hoist checkout state into a parent container at src/components/CheckoutFlow.tsx or a React Context so step transitions read and write the same object. Render a Back button on every step except the first, and verify backward navigation does not clear formData.

const [formData, setFormData] = useState({ shipping: {}, payment: {} })
const goBack = () => setStep(getPreviousStep(step))
<button onClick={goBack} disabled={step === 'shipping'}>Back</button>