AJAX REQUESTS AND API INTERACTIONS: Wanderlust

In project Wonderlust I have tried to chain .then right after the function getVenues()(se example below)

const getVenues = async () => {
  const city = $input.val();
  const urlToFetch = `${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20180101`;
  try {
    const response = await fetch(urlToFetch);
    if (response.ok) {
       const jsonResponse = await response.json();
       const venues = jsonResponse.response.groups[0].items.map(item => item.venue);
       console.log(venues);
       return venues;
    } 
  } catch(error) {
    //console.log(error);
  }
}.then(venues => {
    renderVenues(venues)
})

Why can’t you do that? why do you have to chain it when you call the function (see example below)?

const executeSearch = () => {
  $venueDivs.forEach(venue => venue.empty());
  $weatherDiv.empty();
  $destination.empty();
  $container.css("visibility", "visible");
  getVenues().then(venues => renderVenues(venues));
  getForecast()
  return false;
}

https://www.codecademy.com/paths/build-web-apps-with-react/tracks/bwa-ajax-requests-and-api-interactions/modules/bwa-http-requests/projects/wanderlust