reactjs – React Hooks, API, Axios

I have a problem in my axios api calls, i’m using 2 apis in the same function, both of axios calls works good alone but when i combine them i got error in the Country components which i will be posting after, the error is ( map is not a function )

const onSerializeData = () => { 
    const serializedCountries = serializeCountries(selectedCountries, false);
    //Print the Countries
    console.log(
      `Selected Countries: n ${JSON.stringify(serializedCountries)}`
    );
    
    axios
      .get(
        `https://restcountries.eu/rest/v2/alpha/${
          serializedCountries(serializedCountries.length - 1)
        }`
      )
      .then((responose) => {
        const CouAllData = responose.data;
        console.log("CouAllData", CouAllData);
        setCountryAllData((...CountryAllData, CouAllData));
      })
      .catch((error) => {
        console.log("Error", error);
      });
      axios
      .get(
        `https://corona-api.com/countries/${
          serializedCountries(serializedCountries.length - 1)
        }`
      )
      .then((responose) => {
        const CouData = responose.data.data; //The Data
        setCountryData((...CountryData, CouData)); //set The Data to the OBJ
        console.log(" setCountryData", CountryData);
      })
      .catch((error) => {
        console.log("Error", error);
      });
  };
return (
<div>
<Country countries={CountryData} /> 
      <Country countriesAll={CountryAllData} /></div>
}

Country Component

const DataGroup = this.props.countries.map((county) => {
      return <Data info={county} />;
    });

    const DataGroupAll = this.props.countriesAll.map((country) => {
      return <Data infos={country} />;
    });

    return (
      <div>
         {DataGroup}
         {DataGroupAll}
      </div>

Data Component

 <h1>Name : {this.props.info.code}</h1>
        <h1>Date : {this.props.info.updated_at}</h1>
<h1>Name : {this.props.infos.name}</h1>
        <h1>Capital : {this.props.infos.capital}</h1>