I am fairly new to this and aparently i have not understand async calls...

The function below makes in the case of "claimRewards" an Api call. i thought with Async Await the promise resolves to a useable value but instead the function returns a promise like:

amount: Promise {<fulfilled>: '198816.61958'} 

why is this the case. it does not matter if i wrap the async await around the fetchApi function or the transactionCases function, or leave it completely. i suspect im using it wrong but cannot figure out why this is the case! please help & and kind thank you for your advice.

async function transactionCases(cases, data) {
        const url = 'https://api.elrond.com/transactions?withOperations=true&hashes=' + data.txHash;

        switch (cases){
                        case 'claimRewards': 
                            const claimRewards = await fetchApi(url).then(data => {
                                var filtered = data[0].operations.filter(operation => operation.action.includes("addQuantity"))
                                return converttodecimals(filtered[0].value);
                            }); 
                            return claimRewards;
                            break;
                        default: "No Result";
                    }
    }

function fetchApi(url) {
    return fetch(url)
        .then(response => response.json())
        .then(data => data)
        .catch(error => console.log(error));
}