столбец react-bootstrap предотвращает выбор из выпадающего списка

Я пытаюсь добавить раскрывающийся список в свое приложение. но <select> не работает. после поиска я понял, что его предыдущий элемент <Col> является причиной (сам столбец! не его содержимое. и под предыдущим столбцом я имею в виду столбец с поисковым вводом)! вот мой код:

function SearchBar() {

  const cities= [
    {value:'tehran' , label:'tehran'},
    {value:'Esfehan' , label:'Esfehan'},
    {value:'Qom' , label:'Qom'},
    {value:'Mashhad' , label:'Mashhad'},
    {value:'Shiraz' , label:'Shiraz'},
     ]

return (
<Container className="search-sec">
    
    <Form>
        <Row>
            <Col lg={7} md={5} sm={12} xs={12}>
             <div className="job-field"> 
                <input type="text" className="form-control" 
              placeholder="job title, keywords or company name"/>
            </div>
            </Col>
            
            <Col lg={4} md={5} sm={12} xs={12}>
               
             <select  className='city-field'>
                    { 
                        cities?.map((c) =>
                    <option key={c.value} value={c.value}>{c.label} 
                     </option>
                        )}
            </select>
            
            </Col>
        </Row>
    </Form>
   
</Container>