Usando src en la etiqueta img para renderizar la imagen

 <img className="icon" key={item.weather[0].icon} src={`https://openweathermap.org/img/w/${item.weather[0].icon}.png`} />

Y ponga la clave en div en lugar de los niños.

No estoy seguro de por qué lo está haciendo, pero configurar JSX en su estado parece extraño.

Intente algo como esto, asumiendo res2.data.list tiene la lista de valores.

 <div className="five_day_forecast"> <div className="temp_body"> // Display here with Date/Time & Main Temp. <p> {res2.data.list && res2.data.list.length >0 && res2.data.list.map(item => [ <div className="each_data_point"> <li className="date_time" key={item.dt_txt}>{`Date & Time: ${ item.dt_txt }`}</li> , <img className="icon" key={item.weather[0].icon} >{`https://openweathermap.org/img/w/${ item.weather[0].icon }.png`}</img> , <li className="main_temp" key={item.main.temp}>{`Temp: ${ item.main.temp }`}</li> </div> ])} </p> </div> </div>

Poner el marcado en estado es un antipatrón extraño. El estado está realmente ahí para almacenar datos , no para marcar. Puede usar una función para crear el JSX a partir del map de ping sobre los datos.

Debería agregar la fuente de la imagen al atributo src del elemento img .

Las claves deben agregarse a los elementos principales.

 const imgSrc = `https://openweathermap.org/img/w/${item.weather[0].icon}.png`; <img src={imgSrc} /> 

 // `fetch` your data, and add it to state setForecast(res2.data.list); // `map` over the data and create the markup function getMarkup() { const imgSrc = `https://openweathermap.org/img/w/${item.weather[0].icon}.png`; return forecast.map(item => { <div className="each_data_point" key={item.dt_txt}> <li className="date_time">{`Date & Time: ${item.dt_txt}`}</li>, <img src={imgSrc} className="icon" />, <li className="main_temp">{`Temp: ${item.main.temp}`}</li> </div> }); } return ( <div> <div className="five_day_forecast"> <div className="temp_body"> // Call the function to return the markup // build from state {getMarkup()} </div> </div> );