sample.html

<div className="postcode">
    郵便番号 <br />
    <input
        value={text}
        onChange={handleChange}
        onKeyUp={handleKeyUp}
        onBlur={handleBlur}
        onCompositionStart={startComposition}
        onCompositionEnd={endComposition}
        type="text"
        placeholder="000-0000"
        maxLength={8}
    />
</div>

sample.tsx

//Enterキー押下時、日本語変換のものかどうか判定する
const [composing, setComposition] = useState(false);
const startComposition = () => setComposition(true);
const endComposition = () => setComposition(false);

const [text, setText] = useState("");
const handleChange = (e: { target: { value: string } }) => {
  setText(() => e.target.value);
};

//郵便番号にハイフンを自動挿入するメソッド
const insertStr = (text: string) => {
  //４桁目が'-(ハイフン)’でない場合で８桁以上入力されている場合は末尾を削除する
  if (text.length >= 8) {
    return text.slice(0, 3) + "-" + text.slice(3, text.length - 1);
  }
  return text.slice(0, 3) + "-" + text.slice(3, text.length);
};

//入力時に郵便番号に自動でハイフンを付けるイベント
const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
  //日本語変換中は処理を行わない
  if (composing) {
    return;
  }
  //削除キーではハイフン追加処理が働かないように制御（8がBackspace、46がDelete)
  const key = e.key;
  if (key == "Backspace" || key == "Delete") {
    return false;
  }

  //３桁目に値が入ったら発動
  if (text.length === 3) {
    setText(insertStr(text));
  }
  //４桁目が'-(ハイフン)’かどうかをチェックし、異なる場合は挿入
  if (text.length >= 3 && text.substring(3, 4) !== "-") {
    setText(insertStr(text));
  }
};

//フォーカスが外れた際に4桁目に'-'がついているかチェック、なければ挿入
const handleBlur = () => {
  //４桁目が'-(ハイフン)’かどうかをチェックし、異なる場合は挿入
  if (text.length >= 3 && text.substring(3, 4) !== "-") {
    setText(insertStr(text));
  }
};