How can I access the state after setting it with React Hooks?

I made 3 API calls in the same function. I call this function with the click method. But when I call the function, I cannot make the 2nd API call because the state is not updated. I can access the state outside the function but I need to access it inside. I've read some articles but still don't know exactly how to fix the problem.

Function:

const setInfos = async (e) => {

document.querySelector(".buyer-infos").classList.remove("dropdown-active");

await http
  .get(`api/common/clients/getClients?kelime=${userValue}`, {
    headers: {
      Authorization: token,
    },
  })
  .then((res) => {
    if (res.status === 200 || res.statusText === "OK") {
      //   res.data.value.map((val) => console.log(val.Id));
      //   console.log("target =====", parseInt(e.target.id));
      const companyId = parseInt(e.target.id);
      res.data.value
        .filter((fval) => fval.Id === companyId)
        .map((val) => val.TCKN_VN !== null && setTckn(val.TCKN_VN));
        console.log('2',tckn);
    }
    setUserValue(e.target.innerText);
  })
  .catch((err) => console.log(err));

  
await http
  .get(`api/invoice/einvoice/checkCustomerTaxId/${tckn}`, {
    headers: {
      Authorization: token,
    },
  })
  .then((res) => {
    console.log("E-fatura kullanıcısı? =>", res);
    setInvoiceUser(res.data.HttpStatusCode);
    if (
      res.data.value === "E-Fatura Kullanıcısı Değil" ||
      res.data.message === "E-Fatura Kullanıcısı Değil"
    ) {
      //   res.data.value.map(val => console.log('http',val));
      alert("E-Fatura Kullanıcısı Değil");
      setTckn("");
      document.querySelector(".tck-vergi-no").focus();
      document.querySelector(".tck-vergi-no").style.border =
        "1px solid #FF0000";
      document.querySelector(".tck-vergi-no").style.outline = "none";
    }
  })
  .catch((err) => console.log(err));


if (invoiceUser === 400) {
  alert("E-Fatura Kullanıcısı Değil");
} else {
  await http
    .get(`api/common/clients/getClients?kelime=${userValue}`, {
      headers: {
        Authorization: token,
      },
    })
    .then((res) => {
      if (res.status === 200 || res.statusText === "OK") {
        console.log("kelime", res.data.value);
        res.data.value.forEach((val) => {
          // console.log("INFOS", val.Id);
          // console.log("infoos target", parseInt(e.target.id));
          if (val.Id === parseInt(e.target.id)) {
            // console.log('IF', val);
            val.Title !== null ? setTitle(val.Title) : setTitle("");
            val.TaxOffice !== null && setTaxOffice(val.TaxOffice || "");
            val.Phone !== null && setTel(val.Phone || "");
            val.Email !== null && setEmail(val.Email || "");
            val.Fax !== null && setFax(val.Fax || "");
            val.Country !== null && setCountry(val.Country || "");
            val.City !== null && setCity(val.City || "");
            val.Town !== null && setTown(val.Town || "");
            val.Address !== null && setStreet(val.Address || "");
            val.BuildingName !== null &&
              setBuildingName(val.BuildingName || "");
            val.BuildingNumber !== null &&
              setBuildingNo(val.BuildingNumber || "");
            val.DoorNumber !== null && setDoorNo(val.DoorNumber || "");
            val.PostCode !== null && setPostCode(val.PostCode || "");
            val.WebAdress !== null && setWeb(val.WebAdress || "");
          }
        });
        setUserValue(e.target.innerText);
      }
    })
    .catch((err) => console.log(err));
}  };

State: const [tckn, setTckn] = useState("");