Как использовать правильно в UseEffect ax ios get и datalist

Question

Мне нужна помощь с хуками с картой и списком данных

Эта часть работает хорошо Я получаю данные со стороны сервера

const [fieldApproveOptions, setFieldApproveOptions] = useState([])
 useEffect(() => {
 
    axios.get('/api/certifications/fieldApproveOptions?userId=1234567&rank=Colonel&force=Moran')
        .then(response => {
            setFieldApproveOptions(response.data) }
   
).catch(err => console.log(err))},[fieldApproveOptions])

Но здесь я думаю, что я Я что-то пропустил

{/*FieldApprove button */}

<label className="h6" htmlFor="fieldApprove">Field approve: </label>
<input type="text" list="fieldApproves" name="fieldApprove" />
<datalist id="fieldApproves" defaultValue>

{fieldApproveOptions.map((option,i) =>
  <option key={i++} value={option.id}>
  {option.rank + " " + option.firstName + " " + option.lastName}
   </option>)}
</datalist>

Это ошибка, которую я получаю

TypeError: fieldApproveOptions.map не является функцией