Using src in the img tag to render image

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

And put the key in div instead in the children.

Not sure why you are doing it, but setting JSX in your state seems strange.

Try something like this, assuming res2.data.list has the list of values.

<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>

Putting markup in state is a weird anti-pattern. State is really there to just store data not markup. You can use a function to create the JSX from mapping over the data.

You should be adding the source of the image to the src attribute of the img element.

Keys should be added to parent elements.

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>
);