I am able to get all the JSON in tptcity. After that, I pass it in setCity(tptcity). Now I have data in the state named city. In return I want to display it in Name : {city.name} | Temprature : {city.temp} but it is only displaying one city name and tem[pratrure by random. How can I make it work so that four city names with their temperature will be shown in HTML?

    const [city, setCity] = useState([]);
    const [search, setSearch] = useState("");
    const [istru, setIstru] = useState(false);
    const [cities, setCities] = useState(["Delhi","Dehradun","Kotdwara","Pune"])
    var [tpt, setTpt] = useState(null);
    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();
        setTpt({[search]:resJson.name});
        const tptcity = resJson.main;
        const namecity = resJson.name;
        tptcity['name'] = namecity;
         setCity(tptcity);
      
        };
      const getAllCities = async() => {
        cities.map(city => getCity(city))
        
      }
useEffect(() => {
        getAllCities();
      }, [cities]); 
return(
        <>
       
            <div className="box">  
                <div className="inputData">
              </div>
             <input className="is"></input>
              {!city ? (
            <p className="errorMsg">Enter City Name</p>
           ) : (  
            <div>
                <div className="wave -one"></div>
                <div className="wave -two"></div>
                <div className="wave -three"></div>
                <div className="info">
                <h3 className="tempmin_max">Name : {city.name} | Temprature : {city.temp} </h3>
                </div> 
            </div>
            ) }
            </div>
        </>
    ) 
}```