useEffect running two times, but my dependencies array is empty, why is this happening?

Question

Im new in react development and i dont understand why, in the following code, the useEffect is running two times. Maybe the problem is on await, fetch or async words, but i dont know what to do.

import './App.css';
import Navbar from './Navbar/Navbar';
import { useState, useEffect } from 'react';

function App() {

  const [allPokemons, setAllPokemons] = useState([]);
  const [loadMore, setLoadMore] = useState("https://pokeapi.co/api/v2/pokemon?limit=20");
  
  const getAllPokemons = async () => {
    const res = await fetch(loadMore);
    const data = await res.json();
    console.log(data);
    
    setLoadMore(data.next);
    // setAllPokemons(data);

    function createPokemonObject (result) {
      result.forEach( async (pokemon) => {
        const res2 = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon.name}`);
        const data2 = await res2.json();
        
        // setAllPokemons([...allPokemons, data]);
        setAllPokemons(currentList => [...currentList, data2]);

      });
    }
    createPokemonObject(data.results);
  }

  useEffect(() => {
    getAllPokemons();
  }, []);
  
  return (
    <div className="App">
      <Navbar />
      <div className='pokemons'>
        {allPokemons.map((pokemon) => 
          <li>{pokemon.name}</li>
        )}
      </div>
    </div>
  );
}

export default App;