Estoy llamando a una API y la salida de esa API la estoy poniendo en la lista desplegable.

Estos son el country code en mi lista desplegable. Quiero poner un mensaje predeterminado en drop down like . "Seleccione el código de país" una vez que el usuario haga clic, podrá seleccionar el código de país. aquí por defecto se selecciona EF. en lugar de EF quiero poner mensaje.

Debajo output que estoy poniendo en la list .

 componentDidMount() { axios.get(`http://localhost:8080/country_code`).then((res) => { const countryData = res.data; this.setState({ countryData }); alert(countryData); }); }

código dropdown

 <select name="countriesValue" value={this.state.countriesValue} onChange={this.selectCountryCode} > {this.state.countryData.map((countryData) => ( <option key={countryData} value={countryData}> {countryData} </option> ))} </select>

método:-

 selectCountryCode(e) { e.preventDefault(); this.setState({ countriesValue: e.target.value }); }

variable de state

 this.state = { countryCode: '', countryData: [], countriesValue: '', };

que error estoy haciendo en mi select

Editar1:-

 <select name="countriesValue" value={this.state.countriesValue} onChange={this.selectCountryCode} > <option value="" selected disabled hidden> Please select the country code </option> {this.state.countryData.map((countryData) => ( <option key={countryData} value={countryData}> {countryData} </option> ))} </select>

Después de incluir esta línea

 <option value="" selected disabled hidden> Please select the country code </option>

una vez que el usuario seleccione el menú desplegable Please select the country code no vuelve a aparecer