useFetch help - not working/fetching data

<template>
  <div>

    <div class="grid grid-cols-4 gap-5">
        <div v-for="a in products"> //<- replace products with agents when using valorant-api
          <h3 class="text-red-500 font-bold text-2xl">{{a.displayName }}</h3>
          <img class="rounded-3xl" :src="a.image" :alt="a.displayName" /> //<-- if using valorant-api replace with: "a.displayIcon"
          <h3 class="text-red-500 font-bold">Info:</h3>
          <p>{{a.description}}</p>
        </div>
    </div>
    
  </div>
</template>

<script lang="ts" setup>

// fetch agents
// uncomment this block for fetching data from valorant-api
// let url = 'https://valorant-api.com/v1/agents'
// const parameters = {"isPlayableCharacter":"true"}
// const queryParams = new URLSearchParams(parameters)
// url += `?${queryParams.toString()}`
// const headers = {
//     'Content-Type': 'application/json'
// }

// works
// const agents = ref([])
// onMounted(async () => {
//     const response = await fetch(url, {
//         method: 'GET',
//         headers: headers
//     })
//     const data = await response.json()
//     agents.value = data.data
// })

// does not work 
// const { data: agents} = await useFetch(url, {
//   method: 'GET',
//   headers: headers
// })

// fetch fake products
const {data: products} = await useFetch('https://fakestoreapi.com/products')


</script>

<style lang="scss" scoped>

</style>