Hello there. So here's my problem: I'm trying to make a pokedex with pokeAPI and NextJS, my problem right now is I cant' fetch the abilities and description.

I fetch the pokemon data and that gives me among other data, an array with a name and url, like so:

"abilities": [
    {
      "ability": {
        "name": "limber",
        "url": "https://pokeapi.co/api/v2/ability/7/"
      },
      "is_hidden": false,
      "slot": 1
    },
    {
      "ability": {
        "name": "imposter",
        "url": "https://pokeapi.co/api/v2/ability/150/"
      },
      "is_hidden": true,
      "slot": 3
    }
  ]

So now i want to make another react component with these abilities and fetching from them I get its description. My problem is, I can't make it render to the page. I get the info, Already formatted as I want, but due to promises fullfilment time I cant get them rendered (I think)
My code to fetch each ability and get them on an array is this:

import { useEffect, useState } from 'react'
import { capitalize } from 'utils/capitalize'
import { filterEnglishAbility } from 'utils/filterEnglishAbility'

async function fetchAllAbilities(abilitiesUrls) {
  let abilitiesArr = []
  Promise.all(abilitiesUrls.map((url) => fetch(url)))
    .then((responses) => Promise.all(responses.map((res) => res.json())))
    .then((res) =>
      res.forEach((res) => {
        const abilityName = res.name
        const abilityEnglish = filterEnglishAbility(res.effect_entries)
        const abilityDesc = abilityEnglish[0].effect
        const abilityToAdd = `${capitalize(abilityName)}: ${abilityDesc}`
        abilitiesArr.push(abilityToAdd)
      })
    )
    .catch((error) => {
      console.log(error)
    })
  return abilitiesArr
}

export const useFetchAbilities = (abilitiesObj) => {
  const [abilitiesFetched, setAbilitiesFetched] = useState([])
  const abilitiesUrls = abilitiesObj.map((ability) => ability.ability.url)

  useEffect(() => {
    fetchAllAbilities(abilitiesUrls)
      .then((res) => {
        setAbilitiesFetched(res)
      })
      .catch((err) => console.log(err))
  }, [abilitiesObj])

  return abilitiesFetched
}

To that abilitiesFetched array I'll map each ability to a <p> tag to display. The code in GitHub is:

https://github.com/ValentinGTrapaga/pokedex-nextjs