Reactで、複数ステップに分けた入力フォームを作る方法

--- 各ステップが自分の state で値を持つ書き方 ---
「次へ」: 2/3 お届け先
「戻る」: 1/3 連絡先 / お名前: ""

// types.ts
export type FormValues = {
  name: string;
  email: string;
  address: string;
  note: string;
};

export const initialValues: FormValues = { name: '', email: '', address: '', note: '' };

export const steps = ['連絡先', 'お届け先', '確認'] as const;

// Steps.tsx（連絡先のステップ）
import type { FormValues } from './types';

type StepProps = {
  values: FormValues;
  onChange: (patch: Partial<FormValues>) => void;
};

export function ContactStep({ values, onChange }: StepProps) {
  return (
    <>
      <label>
        お名前
        <input name="name" required value={values.name} onChange={(e) => onChange({ name: e.target.value })} />
      </label>
      <label>
        メール
        <input name="email" type="email" required value={values.email} onChange={(e) => onChange({ email: e.target.value })} />
      </label>
    </>
  );
}

// MultiStepForm.tsx
import { useEffect, useRef, useState, type FormEvent } from 'react';
import { ContactStep, AddressStep, ConfirmStep } from './Steps';
import { initialValues, steps, type FormValues } from './types';

export function MultiStepForm({ onSend }: { onSend: (values: FormValues) => void }) {
  const [step, setStep] = useState(0);
  const [values, setValues] = useState<FormValues>(initialValues);
  const headingRef = useRef<HTMLHeadingElement>(null);
  const shouldFocus = useRef(false);

  // ステップが変わったら、そのステップの見出しにフォーカスを移す
  useEffect(() => {
    if (!shouldFocus.current) return;
    shouldFocus.current = false;
    headingRef.current?.focus();
  }, [step]);

  const update = (patch: Partial<FormValues>) => setValues((v) => ({ ...v, ...patch }));

  const goTo = (next: number) => {
    shouldFocus.current = true;
    setStep(next);
  };

  // ブラウザの入力チェック（required など）を通ったときだけ呼ばれる
  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (step < steps.length - 1) goTo(step + 1);
    else onSend(values);
  };

  const isLast = step === steps.length - 1;

  return (
    <>
      <ol className="progress">
        {steps.map((label, i) => (
          <li key={label} aria-current={i === step ? 'step' : undefined}>{label}</li>
        ))}
      </ol>
      <form onSubmit={handleSubmit}>
        <h2 ref={headingRef} tabIndex={-1}>
          {step + 1}/{steps.length} {steps[step]}
        </h2>
        {step === 0 && <ContactStep values={values} onChange={update} />}
        {step === 1 && <AddressStep values={values} onChange={update} />}
        {step === 2 && <ConfirmStep values={values} />}
        <div className="actions">
          {step > 0 && (
            <button type="button" onClick={() => goTo(step - 1)}>戻る</button>
          )}
          <button type="submit">{isLast ? '送信する' : '次へ'}</button>
        </div>
      </form>
    </>
  );
}

空のまま「次へ」: 1/3 連絡先 / お名前の validationMessage: Please fill out this field.
メールが「yamada」で「次へ」: 1/3 連絡先 / メールの typeMismatch: true
メールの欄で Enter: 2/3 お届け先 / フォーカス: h2 2/3 お届け先 / aria-current: お届け先

住所を入れて「戻る」: 1/3 連絡先 / お名前: 山田 / メール: yamada@example.com
もう一度「次へ」: 2/3 お届け先 / 住所: 東京都
住所の欄で Enter: 3/3 確認 / お名前 山田 メール yamada@example.com 住所 東京都 備考 （なし）
送信: 送信しました：{"name":"山田","email":"yamada@example.com","address":"東京都","note":""}

「戻る」の type プロパティ: submit
2回「次へ」: 3/3 確認 / submit 2回
3つ目で「戻る」: 3/3 確認 / submit 3回
2つ目で「戻る」（戻ると「戻る」ボタンが消える）: 1/3 連絡先 / submit 1回

2つ目の入力欄で Enter: 1/3 連絡先 / submit 1回