使用Typescript和React在HTTP请求后填充下拉列表

我试图用我从后端检索的一些数据(在我的情况下为某些名称)填充一个下拉列表(特别是一个FormControl,因为我正在使用React Bootstrap作为选择)。数据的结构是

{
data[
    {name: "name1"},
    {name: "name2"},
    ...
]
}

我可以检索数据,因为我可以映射结果并将每个名称放入数组中,但是下拉列表始终为空。我究竟做错了什么?这是我的代码:

useEffect(() => {
    fetch(`some/url`)
      .then(rsp => rsp.json())
      .then(data => namesArray = data.data.map(el => {  //data.data is correct, I'm sending the json this way
          return el.name;);
  });
return(
...
<Row>
   <Form.Label column sm={4} md={{ offset: 1 }} className="font-weight-bold">
      Names
   </Form.Label>
   <Col sm={8}>
     <FormControl
        size="sm"
        id="names-dropdown-"
        as="select"
        value={model}
        onChange={e => {
           setNames(e.target.value)  
        }}
       >
       {namesArray.map(el => (<option value={el}>{el}</option>))}
     </FormControl>
  </Col>
</Row>
...)