In the current code, I am taking data in cities and then concate with search. Search has the data in this format (Delhi,Dehradun,Kotdwara,Pune) and when I am passing it through API it is picking the first element (Delhi) and showing only its data. What I want is to pick all the cities one by one and pass them through API one by one. API will run multiple times.

    const [city, setCity] = useState(null);
    const [search, setSearch] = useState("");
    const [istru, setIstru] = useState(false);

    const cities = ["Delhi","Dehradun","Kotdwara","Pune"];
    if(istru==false)
    {
        
        setSearch(search.concat(cities))
        setIstru(true);
    }


    const getCity = async (search) => {
        const url = `https://api.openweathermap.org/data/2.5/weather?q=${search}&units=metric&appid=7938d9005e68d8b258a109c716436c91`;
        const response = await fetch(url);
        const resJson = await response.json();
        const city = resJson.main;
        return city;
      };
    
      const getAllCities = async() => {
        const promises = cities.map(city => getCity(city))
        const cities = await Promise.all(promises);
        // Do whatever you want with all cities
      }
    
      useEffect(() => {
        getAllCities();
      }, [cities]);


return(       
 {!city ? (
            <p className="errorMsg">Enter City Name</p>
           ) : (
            <div>
               
                <div className="info">
                <h2 className="location">
                <i className="fa-solid fa-street-view"> </i>{search}
                </h2>
                <h1 className="temp">
                {cities.temp}
                </h1>
                <h3 className="tempmin_max">
                   Min : {cities.temp_min} | Max : {cities.temp_max}
                </h3>
                </div>
)```