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

Question

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("");