How to do sync conditional check on async promise call

Scenario: recommendationsArr is an array of items (Its 99.9% not null, but since its an external api call I prefer to have a check). The purpose is to have values for valueOne, validItem, and an updated recommendationsArr.
The validity depends on the existence of valueOne, so if the recommendationsArr[0] has valid valueOne then I don't need to fetch api results for the rest of the array.

const getContent = function (item) {
  console.log("####### Inside the getContent function #########");
  contentResponse = fetchContent(item);
  return contentResponse;
}

if (recommendationsArr.length > 0) {
  console.log("####### If Condition #########");
  recommendationsArr.find((item) => {
    getContent(item).then(function(response){
      try { // to get valueOne
          console.log("####### Try for: ######### ", term);
          valueOne = response.content.valueOne; //may or may not be present
          recommendationsArr.splice(recommendationsArr.indexOf(item), 1); // this is for styling first occurence is styled differently so thats popped out
          validItem = item;
          console.log("##### Valid item is: ", term);
          return true;
        } catch (err) {
          console.log("##### Item not valid: ", recommendationsArr.indexOf(item));
          valueOne = null;
          return false;
        }
    });
  });

  console.log("######### Just hanging out!!! #########");

  return {
    component: <Layout><ComponentName
      //pass other non-dependent props
      validItem={validItem}
      valueOne={valueOne}
      recommendationsArr={recommendationsArr}
    /></Layout>,
    title: `Page Title`,
  };
}

return null;

Suppose recommendationsArr = ["blue", "white", "green", "red"]; //usually the array is anywhere between 12-50 elements

What is happening, console log:

####### If Condition #########
####### getApiContent response for #########  blue
####### getApiContent response for #########  white
####### getApiContent response for #########  green
####### getApiContent response for #########  red
######### Just hanging out!!! #########
####### Try for: #########  blue
//I see data here
##### Valid item is:  blue
####### Try for: #########  white
//I see data here
##### Valid item is:  white
####### Try for: #########  green
//I see data here with valueOne missing in returned data
##### Item not valid: green
####### Try for: #########  red
//I see data here
##### Valid item is:  red

As you see, the API request getContent keeps requesting for all terms, and oly then gets to .then. This causes a whole bunch of api requests-response that I wont even need, I know am trying to make synchronize calls try/catch on something that's asyc .then but I don't know how to achieve this.

Ideally, API should not be called unless .then returns false, if try returns true - no more API requests and exit. Also, I would need to access the response outside of .then to update component's props How can I achieve this? I briefly read about the async library, is that suitable for this situation?

Any help/guidance is appreciated.. I've been stuck with this

via user988544