Not able to display drop down list in reactjs

My API is returning below result.

I have below code to display in list.

const [result,setResult] = useState([]);
const fetchStatus = async ()=>{
       await httpClient.get( config.resourceServerUrl+"/certificates/status").then(res=>{
       setResult(res.data);
        setActive(true);
        alert(result);
       })

and I am displaying list like below.

<div className="col-md-4">
                                <label htmlFor="status">Status</label>
                                <select
                                name="requestStatus"
                                style={{ display: 'block' }}>
                                <option value="" selected >
                                    Please Select the Status
                                </option>
                               {
                                  
                                 active &&  result.map((sts:any)=>{
                                       <option key="" value="">
                                           {sts}
                                       </option>
                                   })
                               }
                          </select>

though there is no error but it is not displaying anything.

>Solution :

1. I don’t believe you await httpClient.get. The .then will be called when the get completes.

2. you are setting the dropdown to each object in the returned array. You want to set it to the value of the request_status key: sts.request_status

3. set the key attribute for elements you create using map

   {
   active && result.map((sts:any)=>{

   {sts.request_status}

   })
   }