How to call render in React Native after API successfully fetches data

I am new to React Native and I have been having trouble populating dropdown options in it.

Before you say that it is a duplicate question - here's the link to the question which was asked 3 years ago, where they discussed how to populate the dropdown using arrays and lists.

I am using map which is a data structure introduced in JS in ES6.

I am using Picker for the dropdown.

I am filling the map called branchData with data fetched by REST API.

here's my code for populating the dropdown :

<Picker
            selectedValue={this.state.branch}
            style={styles.fieldPicker}
            mode="dropdown"

            onValueChange={(itemValue, itemIndex) =>
              this.setState({branch: itemValue})
            }>

            {/* Data Binding */}

                {this.state.branchData.forEach((name, id) => 
                      {
                      return <Picker.Item key={id} value={id} label={name} />;
                      })
                }



          </Picker>

I checked if name and id are being correctly accessed by logging it on tap of a button.

The issue is that I am not able to see the dropdown getting populated, all I see is just the downarrow tapping which does nothing.

Earlier I had manually added two picker items and I was able to see those on tapping.

UPDATE:

The issue is that the render function is called before the API could fetch the details and update state variable.

Thereby the dropdown is empty but the console.log that is called on pressing a button shows data. (lemme know if you want to see the code)

I added the API call in constructor assuming that it will be executed before render, but API call being an asynchronous one, doesn't happen before render.

In short - How to call render after API successfully fetches data ?