SOLUTION: as @prasanth sugested me, I created a fake dropdown, a placeholder. Both the fake and the real dropdown shares a

style={{"display":countryChange?"":"none"}}

obviously the real one is inverted with the fake one. Once i ping the api, I hide the real one and show the fake one. Once the api returns with value, i write the state so the fake disapears. Worked like a charm.

I'm new to react, and trying to make a dynamic dropdown based on an api call. I have a local api in "/avaliable_countries" which returns {countries:"Brasil" and "United States"}. I want those two fields to create the <options> dynamcially, and it is almost working as intended.

The problemis: In the first click, I got this weird arrows. If I click out/again or two times, then it becomes normal.

no click:

first click, weird arrows(and using the weird arrows can navigate between the two countries):

Clicking in/out or two times in a row, becomes the desired output:

Without any CSS(weird arrows still here):

The code:

import React,{useState} from 'react';
import {Link} from 'react-router-dom';
import './styles.css';
import api from '../../services/api';

export default function Signup(){
    var [countriesObj, setCountriesObj] = useState(<option>Select your country</option>)
    async function getAvaliableCountries(){
        setCountriesObj();
        try{
            const response = await api.get(
                'avaliable_countries','',
                {headers: {
                    'Content-Type':"application/json",   
                }        
                });
                window.arrayOfCountries = response.data.countries ; 
                let countriesList = (window.arrayOfCountries.map((data) =>
                <option>
                    {data}
                </option>)               
            );
            setCountriesObj(countriesList);
        }catch(err){
            alert('Error obtaining the list of countries.')
        }
    }


    return(
        <div className="wrapper">
            <div id="formContent">        
            <h2 className="inactive underlineHover"> 
            <Link to="/">Sign In</Link>
            </h2>
            <h2 className="active">                
            Sign Up
            </h2>     
            <form>
                <select
                onClick={getAvaliableCountries}
                name="animal"
                className="form-control">
                {countriesObj}
                </select>    
            </form>    
            <div id="formFooter">                   
            </div>        
        </div>
        </div>
    );
}