select값이 출력이 안돼요

input 값은 나오는데 select 값은 출력이 안돼요 ㅠ 오류 메세지도 따로 나오는 건 없고 console.log로 cities 값을 볼려고 했는데 빈 Array가 나옵니다 ㅠ

import Header from "./components/Header.js";
import RegionList from "./components/RegionList.js";
import CityDetail from "./components/CityDetail.js";
import CityList from "./components/CityList.js";
import { request } from "./components/api.js";

export default function App($app){
  const getSortBy = () => {
    if (window.location.search){
      return window.location.search.split('sort=')[1].split('&')[0];
    }
    return 'total';
  };
  const getSearchWorld = () => {
    if(window.location.search && window.location.search.includes('search=')){
      return window.location.search.split('search=')[1]
    }  //뒤에 있는 값을 반환
    return '';
  };

  this.state={
    startIdx : 0,
    sortBy : getSortBy(),
    searchWorld: getSearchWorld(),
    region: '',
    cities:'',
  };
  const header = new Header({
    $app, 
    initialState:{
      sortBy:this.state.sortBy, 
      searchWorld:this.state.searchWorld 
    },
    handleSortChange: async(sortBy) => {
      const pageUrl = `/${this.state.region}?sort=${sortBy}`;
      history.pushState(
        null, 
        null, 
        this.state.searchWorld ? pageUrl + `&search=${this.state.searchWorld}` : pageUrl
      );

      //변경된 정렬기준을 적용한 새로운 데이터를 불러옴 (매개변수로 전달받은 새로운 정렬기준인 sortBy 값을 넣어야함)
      const cities = await request(0, this.state.region, sortBy, this.state.searchWorld);
      console.log(cities)
      // 변경된 상태값을 업데이트
      this.setState({
        ...this.state,
        startIdx:0,
        sortBy: sortBy,
        cities: cities,
      });
    },

    handleSearch: async(searchWorld) => {
      //웹사이트 주소를 알맞게 변경
      history.pushState(
        null,
        null,
        `/${this.state.region}?sort=${this.state.sortBy}&search=${searchWorld}`
      );
      const cities = await request(0, this.state.region, this.state.sortBy, searchWorld);

      this.setState({
        ...this.state,
        startIdx:0,
        searchWorld: searchWorld,
        cities: cities
      })
    },
  });
  const regionList = new RegionList();
  const cityList = new CityList({
    $app, 
    initialState:this.state.cities,
    // 아래는 더보기 버튼을 눌렀을 때 실행되는 것 
    handleLoadMore: async() => {
      const newStartIdx = this.state.startIdx + 40;
      const newCities = await request(newStartIdx, this.state.sortBy, this.state.region, this.state.searchWorld);
      this.setState({
        ...this.state,
        startIdx : newStartIdx,
        cities:{
          cities:[...this.state.cities.cities, ...newCities.cities],
          isEnd: newCities.isEnd,
        }
      })

    }
  });
  const cityDetail = new CityDetail();

  this.setState = (newState) => {
    this.state = newState;
    cityList.setState(this.state.cities);
    header.setState({sortBy:this.state.sortBy, searchWorld:this.state.searchWorld});
  };

  const init = async() => {
    const cities = await request(this.state.startIdx, this.state.sortBy, this.state.region, this.state.searchWorld);
    this.setState({
      ...this.state,
      cities: cities, //api 호출의 결과인 cities
    });
  };

  init();
}

export default function Header({$app, initialState, handleSortChange, handleSearch}){
  this.state = initialState;
  this.$target = document.createElement('div');
  this.$target.className = 'header';

  this.handleSortChange = handleSortChange;
  this.handleSearch = handleSearch;

  $app.appendChild(this.$target);

  this.template = () => {
    //구조분해할당
    const {sortBy, searchWorld} = this.state;
    let temp = `
      <div class="title">
        <a href="/">Trip Wiki</a>
      </div>
      <div class="filter-search-container">
        <div class="filter">
          <select id="sortList" class="sort-list">
            <option value="total" ${sortBy === 'total' ? 'selected':''}>Total</option>
            <option value="cost" ${sortBy === 'cost' ? 'selected':''}>Cost</option>
            <option value="fun" ${sortBy === 'fun' ? 'selected':''}>Fun</option>
            <option value="safety" ${sortBy === 'safety' ? 'selected':''}>Safety</option>
            <option value="internet" ${sortBy === 'internet' ? 'selected':''}>Internet</option>
            <option value="air" ${sortBy === 'air' ? 'selected':''}>Air Quality</option>
            <option value="food" ${sortBy === 'food' ? 'selected':''}>Food</option>
          </select>
        </div>
        <div class="search">
          <input type="text" placeholder="Search" id="search" autocomplete="off" value=${searchWorld}>
        </div>
      </div>`;

    return temp;
  };

  this.render = () => {
    this.$target.innerHTML = this.template();
    document.getElementById('sortList').addEventListener('change',(event) => {
      this.handleSortChange(event.target.value);
    });

    const $searchInput = document.getElementById('search');
    $searchInput.addEventListener('keydown',(event) => {
      if(event.key === 'Enter'){
        this.handleSearch($searchInput.value);
      }
    });
  };

  this.setState = (newState) => {
    this.state = newState;
    this.render()
  };
  
  this.render();
}

const cities = await request(0, this.state.region, sortBy, this.state.searchWorld);