I use one server call to fetch data that I need to pass to another component and to make a new server call there where I will take the URL and list the data, but I encounter that on the first click the array remains empty for the second server call, I get them only on refresh.

 const getSectionData = async () => {
    try {
      const SectionDataServer = await api(apiKeyValue).getForSekcija("sekcija");
      console.log("section data;:::::::::", SectionDataServer);

      if (
        SectionDataServer !== undefined &&
        SectionDataServer.data &&
        SectionDataServer.data.m_response
      ) {
        setSectionData(SectionDataServer.data.m_response);
        //setTrafficDataForDiagram(data.data.m_response);
      }
    } catch (error) {
      console.error("Error fetching data:", error);
    } finally {
      //setLoading(false);
    }
  };
```this is another component

and function for new server call

const handlePress = async (item, index) => {
// callserverForPocetna();
setSelectedItem(index); // Postavite odabrani element
setBroj(item.id); // Promijenite broj na id odabranog elementa
try {
const SectionSubDataServer = await api(apiKeyValue).post(item.url);

  if (
    SectionSubDataServer !== undefined &&
    SectionSubDataServer.data &&
    SectionSubDataServer.data.m_response
  ) {
    setSectionSubData(SectionSubDataServer.data.m_response);
  }
} catch (error) {
  console.error("Error fetching data:", error);
} finally {
  //setLoading(false);
}

};

i want to know why on first click handlePress button,i get empty array,only on button refresh i get all data