Updating ionselect after its rendered

Hi im needing a little help. I have googled around but havent figured how to do it.
I have a IonSelect component and the options are retreaved from an array that is fetched from my server. The array works all fine however the options do not update. Im guessing the work that populates the array runs after the component is rendered. Im not sure how to solve this but i was thinking of running the code before the component is rendered. However i will then encountered another issue. I have another ionselect that will change the result depending on what is selected in the first ionselect Any ideas i hope this makes sence
my code

 <IonItem onClick={callFuncToPopularArray}>
      <IonLabel>Select Option</IonLabel>
        <IonSelect multiple={false} interface="alert" cancelText="Cancel" okText="Confirm">
        {array.map(elem  => (
          <IonSelectOption key={elem.id} value={elem.id} >{elem.data().name}

      <IonLabel>Select second option</IonLabel>
//This is where i would get the data from the database depending on the option above but not go to that yet
        <IonSelect multiple={false} interface="alert" cancelText="Cancel" okText="Confirm">
        {array2.map(elem  => (
          <IonSelectOption key={elem.name} value={elem.name} >{elem.name}</IonSelectOption>