How to use retrieved data from post request in JSX

I am retrieving data from post request which is simple object. In order to retrieve data i need to use await operator and as far as I know await can be used only in async functions. If I use async function then how to access that data outside that async function in my JSX ? or is it possible to retrieve data from post request without await ? Here is the code:

const handleVerifyData = async() => {
const verifyCall = await reservationsService.verifyQueueReservations(filteredReservationIds)
const verifiedData = verifyCall.data
return verifiedData 
}
<Modal
isOpen={modals['carOnPlaceModal']?.isOpened ?? false}
onClose={handleClose}
styles={{
width: "500px",
bodyPadding: "28px 30px"
}}
>
{
verifiedData?.map(info => {
return <Flex key={info.reservationId} style={{ flexDirection: "row", height: "40%", justifyContent: "space-evenly", alignItems: "flex-start" }}>
<Flex style={{ display: "flex", flexDirection: "column" }}>
<Text mb="10px">{info?.vehicleMark} {info?.vehicleModel} ({info?.vehicleBodyType})</Text>
<CarNumberBox title={info.vehicleGovNumber} />
</Flex>
<Flex style={{ display: "flex", flexDirection: "column" }}>
<Text fontSize="base" mb="10px">{T("notifications.car_on_place.form.select_box")}</Text>
<ChakraSelect
value={selectedBoxes[info.reservationId]}
onChange={async (e: any) => {
const boxNumber: number = parseInt(e.target.value);
const res: AxiosResponse<any> =
await reservationsService.getCheckboxAvailability(info.reservationId, boxNumber);
const updatedSelectedBoxes: any = { ...selectedBoxes };
// If the box is taken but it  car is not being washed
const hasWarning: boolean = res.data?.data?.warning ?? false;
// If the box is taken but it the car is being washed
const hasError: boolean = res.data?.data?.error ?? false;
// const hasValidationError: boolean = Object.values(updatedSelectedBoxes).some((e: any) => e === boxNumber) ?? false;
updatedSelectedBoxes[info.reservationId] = boxNumber;
if (hasWarning) {
toggleModal(
"confirmationModal",
true,
{
title: `დარწმუნებული ხართ, რომ გსურთ ${boxNumber} ბოქსის შეცვლა`,
handleSubmit: () => {
setSelectedBoxes(updatedSelectedBoxes)
toggleModal("confirmationModal", false, { title: "" })
}
}
)
return;
// If denied pass () => {}
// If accepted
//const updatedSelectedBoxes: any = { ...selectedBoxes };
// If CheckBoxAvailability returns no warning or errors change the value 
// updatedSelectedBoxes[info.reservationId] = e.value;
// setSelectedBoxes(updatedSelectedBoxes);
}
if (hasError) {
toast.error(T("general.error"))
console.log('Warning for box');
return;
}
// // If CheckBoxAvailability returns no warning or errors change the value 
setSelectedBoxes(updatedSelectedBoxes);
}}
// options={generateOptions(info?.boxCount || 0)}
>
{Array(info?.boxCount).fill(0).map((option: any, index: number) => {
return <option key={index} value={index + 1}>#{index + 1}</option>;
})}
</ChakraSelect>
</Flex>
</Flex>
})
}
</Modal>

verifiedData is the value i wanna access outside that function freely. Thanks in advance.

Since you're using this value in the rendering:

verifiedData?.map(info => {

Then presumably this value exists in state, no? Something like this:

const [verifiedData, setVerifiedData] = useState([]);

In which case trying to make the rendering itself wait for the result is the wrong approach. Instead, the function should update state:

const handleVerifyData = async() => {
const verifyCall = await reservationsService.verifyQueueReservations(filteredReservationIds);
const verifiedData = verifyCall.data;
setVerifiedData(verifiedData);
}

When state is updated, the component will re-render with the new data.

As an aside, be careful with variable naming. You are currently shadowing the state variable here:

const verifiedData = verifyCall.data;

Over time this could easily lead to confusion and bugs. You can eliminate the shadowed variable entirely:

const handleVerifyData = async() => {
const verifyCall = await reservationsService.verifyQueueReservations(filteredReservationIds);
setVerifiedData(verifyCall.data);
}