گرفتن اطلاعات از متد async و نمایش آن در قالب

با عرض سلام خدمت همه دوستان
مشکل من اینجاست که وقتی میخوام از یک متد async از api یک لیست از شهر ها رو بگیرم با همچین مشکلی رو به رو میشم
فقط از قبل ذکر کنم که وقتی از api اطلاعات رو میگیرم و داخل console.log نمایش میدم مشکلی نیست ولی برای render کردن در قالب مشکل دارم.

  constructor() {
      super();
      this.state = {

        cities:[]
      };
}

سپس داخل life cycle hook مبنی بر componentdimount

  async componentDidMount(){
   const {data} = await getCities();
   this.setState({cities:data});

  }

همچین چیزی میارم ولی وقتی میخوام cities رو پیمایش کنم

  <select className="select2 form__input form__group__danger">
                                <option> همه محله ها</option>
                                <optgroup label="تهران">

                                  {cities.map( city =>(
                                    <option key={city.id}>{city.title}</option>
                                  ))}

                                </optgroup>

                              </select>

با ارور Line 139: 'cities' is not defined no-undef رو به رو مشیم
کسی میدونه علتش چیه ؟