【React】郵便番号検索APIを使って郵便番号から住所を自動入力する

import axios from "axios";
import { ChangeEvent, useState } from "react";

type Zipcode = {
  main: string;
  sub: string;
};
type Address = {
  address1: string;
  address2: string;
  address3: string;
};

export default function App() {
  const [zipcode, setZipcodeMain] = useState<Zipcode>({
    main: "",
    sub: ""
  });
  const [address, setAddress] = useState<Address>({
    address1: "",
    address2: "",
    address3: ""
  });

  const updateZipcodeMain = (e: ChangeEvent<HTMLInputElement>) => {
    setZipcodeMain({ ...zipcode, main: e.target.value });
  };
  const updateZipcodeSub = async (e: ChangeEvent<HTMLInputElement>) => {
    setZipcodeMain({ ...zipcode, sub: e.target.value });
    if (e.target.value.length === 4 && zipcode.main.length === 3) {
      try {
        const res = await axios.get(
          "https://zipcloud.ibsnet.co.jp/api/search",
          {
            params: {
              zipcode: zipcode.main + e.target.value
            }
          }
        );
        if (res.data.results) {
          const result = res.data.results[0];
          setAddress({
            ...address,
            address1: result["address1"],
            address2: result["address2"],
            address3: result["address3"]
          });
        }
      } catch {
        alert("住所の取得に失敗しました。");
      }
    }
  };

  return (
    <div>
      <h2>郵便番号から住所の住所の自動入力</h2>
      <div>
        <span>郵便番号：</span>
        <input type="text" onChange={updateZipcodeMain} value={zipcode.main} />
        <span> - </span>
        <input type="text" onChange={updateZipcodeSub} value={zipcode.sub} />
      </div>
      <div>
        <p>自動入力される住所</p>
        <div>
          <p>都道府県： {address.address1}</p>
          <p>市区町村： {address.address2}</p>
          <p>町域： {address.address3}</p>
        </div>
      </div>
    </div>
  );
}

  const updateZipcodeSub = async (e: ChangeEvent<HTMLInputElement>) => {
    setZipcodeMain({ ...zipcode, sub: e.target.value });
    if (e.target.value.length === 4 && zipcode.main.length === 3) {
      try {
        const res = await axios.get(
          "https://zipcloud.ibsnet.co.jp/api/search",
          {
            params: {
              zipcode: zipcode.main + e.target.value
            }
          }
        );
        if (res.data.results) {
          const result = res.data.results[0];
          setAddress({
            ...address,
            address1: result["address1"],
            address2: result["address2"],
            address3: result["address3"]
          });
        }
      } catch {
        alert("住所の取得に失敗しました。");
      }
    }
  };

setZipcodeMain({ ...zipcode, sub: e.target.value });

if (e.target.value.length === 4 && zipcode.main.length === 3) {
  // APIリクエスト
}

const res = await axios.get(
  "https://zipcloud.ibsnet.co.jp/api/search",
  {
    params: {
      zipcode: zipcode.main + e.target.value
    }
  }
);

if (res.data.results) {
  const result = res.data.results[0];
  setAddress({
    ...address,
    address1: result["address1"],
    address2: result["address2"],
    address3: result["address3"]
  });
}

if (res.data.results) {
}

 const result = res.data.results[0];
  setAddress({
    ...address,
    address1: result["address1"],
    address2: result["address2"],
    address3: result["address3"]
  });