Parsing JSON values in React JS and mapping to component

I have been stuck for days trying to pull data into my components from a Fetch API JSON result. As a React beginner, this has been a challenge for me and any direction to help me learn and resolve the issue is appreciated. I have the following JSON response copied below followed by my component setup.

My thoughts are that I am not pulling in the correct JSON key values in order or something along those lines.

JSON:

{
  "data": [
    {
      "virusIndex": 2,
      "temperature": 26.5,
      "humidity": 58.6,
      "pm25": 3,
      "tvoc": 234,
      "co2": 435,
      "co": 0,
      "airPressure": 991,
      "ozone": 8.7,
      "no2": 19.4,
      "timestamp": 1646109873
    }
  ],
  "usersettings": {
    "temperature": "°C",
    "temp": "c",
    "humidity": "%",
    "pm25": "µg/m^3",
    "dust": "µg/m^3",
    "tvoc": "ppb",
    "voc": "ppb",
    "co2": "ppm",
    "co": "ppm",
    "airPressure": "mbar",
    "pressure": "mbar",
    "ozone": "ppb",
    "no2": "ppb",
    "pm1": "µg/m^3",
    "pm4": "µg/m^3",
    "pm10": "µg/m^3",
    "ch2o": "ppb",
    "light": "lux",
    "sound": "dBA"
  },
  "count": 104
}

App.js:

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      airData: []
    }
   }

componentDidMount(){
var myHeaders = new Headers();
      myHeaders.append("Authorization", "Bearer xxxxxxxxx");

      var urlencoded = new URLSearchParams();
      urlencoded.append("macAddress", "xxxxxxxx");
      urlencoded.append("mode", "minute");

      var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: urlencoded,
      redirect: 'follow'
      };

  fetch("MY_API_URL", requestOptions)
   .then(response => response.json())
   .then(res => {
     console.log(res)
     this.setState({
       airData: res.data
     })
   });
  }


  
  render () {
        return (
          <div className="app">
            <Header />
            <div className="spacer"></div>
            <OverallStatus />
            {this.state.airData.map(res => {
                  <div>
                    <div className='qualityFactor'>
                      <h1><img src={iconHumidity} alt="Logo" className="iconSmall" />Humidity {res.humidity}%</h1>
                      <ProgressBar completed={res.humidity}
                      maxCompleted={100} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconAirPressure} alt="Logo" className="iconSmall" />Air Pressure {e.AirPressure} hPa</h1>
                      <ProgressBar completed={e.AirPressure}
                      maxCompleted={1030} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconCarbonDioxide} alt="Logo" className="iconSmall" />Carbon Dioxide {e.CO2} ppm</h1>
                      <ProgressBar completed={e.CO2}
                      maxCompleted={2000} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconVOCs} alt="Logo" className="iconSmall" />Chemicals {e.TVOC} ppb</h1>
                      <ProgressBar completed={e.TVOC}
                      maxCompleted={1000} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconParticulateMatter} alt="Logo" className="iconSmall" />Particles {e.PM25} ug/m3</h1>
                      <ProgressBar completed={e.PM25}
                      maxCompleted={100} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconCarbonMonoxide} alt="Logo" className="iconSmall" />Carbon Monoxide {e.CO} ppm</h1>
                      <ProgressBar completed={e.CO}
                      maxCompleted={100} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconNitrogenDioxide} alt="Logo" className="iconSmall" />Nitrogen Dioxide {e.NO2} ppb</h1>
                      <ProgressBar completed={e.NO2}
                      maxCompleted={200} className="statusBar" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconOzone} alt="Logo" className="iconSmall" />Ozone {e.Ozone} ppb</h1>
                      <ProgressBar completed={e.Ozone}
                      maxCompleted={100} className="statusBar" />
                    </div>
                  </div>
              })}
          </div>
        )
    }
  }
  
  

export default App;