Data is not rendering in the first click of a Button’s onClick API call. But in the Second click the Data is rendering

I am calling a function on a onClick event of a button and in the function there is three if condition and inside each condition i am calling three GET APIs and setting the response data inside a useState. Then populaing the data in the frontend.

but in the first click the API call is happening but the state is not still null and thats why the data is not populating in the frontend.

but after the second call the data is populating.

this is the API call –

  axios.get(`https://somthing-somthing.io/api/vendor?id=${Id}`)
    .then(response => {
      const responseData = response.data;
      if (responseData.code === 200) {
        setVendor(responseData.data);
      }
    })
    .catch(error => {
      console.log(error);
    });