javascript – Problema con foreach dentro de un async await

Estoy teniendo un problema estoy llamando a mi funcion getPokemons que trae informaciĆ³n de una api, mi problema es que quiero hacer un array que al finalizar la segunda funciĆ³n createPokemons me retorne el arreglo generado. Pero no lo hace.

const getPokemons = async () => {
    const res = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20');
    const data = await res.json();

    function createPokemon(results) {
      const pkArray = (); // Retornar este arreglo.

      results.forEach(async (pokemon) => {
        const pokeRes = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon.name}`);
        const pokeData = await pokeRes.json();

        pkArray.push(pokeData);
      });
      
      return pkArray;
    }

    const pkData = createPokemon(data.results);
    console.log(pkData) // ();
  };