UseState async проблема не обновляет мой список

Я пытаюсь установить DataList перед выполнением вызова API.

но dataList ничего не содержит при выполнении вызова API.

мои коды работают со следующими шагами.

1. при нажатии кнопки -> выполнить onSubmit ().
2. Функция getSortedId запускается перед выполнением вызова API для получения отсортированных данных.
3. выполняет вызов API.

но мой вызов API не работает из-за отсутствия списка данных.

Я знаю, что хуки работают асинхронно.

но как мне отправить вызов API с правильным списком данных.

 const [ dataList, setDataList ] = useState<any>([]); //set Hooks
//a filtering function
  async function getSortedId() {

       await selected.map(data => {
        console.info("transaction_id", data.transaction_id);

         //set sorted Data to datalist
        setDataList((dataList : any) => [...dataList, data.transaction_id]);
      })
  }

 const onSubmit = (data : any) => {
    let refundMsg = "";
    getSortedId();
  
    axios.put("/api/v1/updates", {
      params: {
        "refundIdList" : dataList, //dataList should have some value but it contains nothing.
        "refundReason" : refundMsg,
        "reasonEtcReason" : data.reasonEtcReason,
        "feeUserPay" : data.feeUserPay ? 1 : 0,
        "penaltyFeeUserPay" : data.penaltyFeePartnerPay ? 1 : 0,
        "penaltyFeeUtPay:" : data.penaltyFeeUtPay ? 1 : 0,
        "penaltyFeePartnerPay" : data.penaltyFeePartnerPay ? 1 : 0,       
      }
    }).then(res => {
      console.info("response", res);
    }).catch(err => { 
      console.info("Error : ", err);
    })
    }
  };
 return (
    <Button type = "submit" onClick = {onSubmit()} > Save </Button>
  )