async/await 루프 내에서 API 요청 순서 보장 및 동시성 제어 문제

사이드 프로젝트의 대시보드 구현 중, 여러 개의 API 엔드포인트에서 데이터를 순차적으로 가져와 배열에 저장하려 합니다.

코드:

const urls = ['/api/1', '/api/2', '/api/3'];
const results = [];

async function fetchData() {
  urls.forEach(async (url) => {
    const response = await fetch(url);
    const data = await response.json();
    results.push(data);
  });
  return results;
}

fetchData().then(res => console.log(res));

오류: `results` 배열이 빈 상태 `[]`로 출력됨.

시도: `forEach` 내부의 `async` 함수에 `await`를 추가했으나 결과는 동일함.

질문: `forEach` 루프 내에서 `async/await`가 기대와 다르게 동작하여 `results`가 빈 배열로 반환되는 이유와 이를 순차적으로 처리하는 방법은 무엇입니까?