Use access token from first fetch in a second fetch API in React JS

As a newbie to React I have been stuck for awhile on how to get my access token to be put to use in a second fetch API. In the first fetch (Get token), I am able to successfully print my access token to the console. My issue is how to then use this token as the Bearer authorization in the second fetch (Get data). Any direction is appreciated.

App.js (with some private data redacted):

class App extends Component {

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

componentDidMount(){

//Get token
var urlencoded = new URLSearchParams();
urlencoded.append("code", "MY_API_KEY");

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

fetch("API_URL_FOR_TOKEN", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));



  //Get Data
  var myHeaders = new Headers();
      myHeaders.append("Authorization", "Bearer xxxxxxxxx");

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

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

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


  
  render () {
        return (
          <div className="app">
             <header className="header">
                <div>
                <img src={logo} alt="Logo" className="logo" />
                    <div className="temperature">
                    
                        <FaTemperatureHigh /> 78°
                        
                    </div>
                </div>
            </header>
            <div className="spacer"></div>
            <OverallStatus />
            {this.state.airData.map(res => (
                  <div>
                    <div className='qualityFactor'>
                      <h1><img src={iconHumidity} alt="Logo" className="iconSmall" />Humidity <span className="right-justify">{res.humidity}%</span></h1>
                      <ProgressBar completed={res.humidity}
                      maxCompleted={100} className="statusBar" height="40px" baseBgColor="#8BC34A" isLabelVisible="true" customLabel="•" labelSize="240px" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconAirPressure} alt="Logo" className="iconSmall" />Air Pressure <span className="right-justify">{res.airPressure} hPa</span></h1>
                      <ProgressBar completed={res.airPressure}
                      maxCompleted={1030} className="statusBar" height="40px" baseBgColor="#8BC34A" isLabelVisible="true" customLabel="•" labelSize="240px" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconCarbonDioxide} alt="Logo" className="iconSmall" />Carbon Dioxide <span className="right-justify">{res.co2} ppm</span></h1>
                      <ProgressBar completed={res.co2}
                      maxCompleted={2000} className="statusBar" height="40px" baseBgColor="#8BC34A" isLabelVisible="true" customLabel="•" labelSize="240px" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconVOCs} alt="Logo" className="iconSmall" />Chemicals <span className="right-justify">{res.tvoc} ppb</span></h1>
                      <ProgressBar completed={res.tvoc}
                      maxCompleted={1000} className="statusBar" height="40px" baseBgColor="#8BC34A" isLabelVisible="true" customLabel="•" labelSize="240px" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconParticulateMatter} alt="Logo" className="iconSmall" />Particles <span className="right-justify">{res.pm25} ug/m3</span></h1>
                      <ProgressBar completed={res.pm25}
                      maxCompleted={100} className="statusBar" height="40px" baseBgColor="#8BC34A" isLabelVisible="true" customLabel="•" labelSize="240px" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconCarbonMonoxide} alt="Logo" className="iconSmall" />Carbon Monoxide <span className="right-justify">{res.co} ppm</span></h1>
                      <ProgressBar completed={res.co}
                      maxCompleted={100} className="statusBar" height="40px" baseBgColor="#8BC34A" isLabelVisible="true" customLabel="•" labelSize="240px" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconNitrogenDioxide} alt="Logo" className="iconSmall" />Nitrogen Dioxide <span className="right-justify">{res.no2} ppb</span></h1>
                      <ProgressBar completed={res.no2}
                      maxCompleted={200} className="statusBar" height="40px" baseBgColor="#8BC34A" isLabelVisible="true" customLabel="•" labelSize="240px" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconOzone} alt="Logo" className="iconSmall" />Ozone <span className="right-justify">{res.ozone} ppb</span></h1>
                      <ProgressBar completed={res.ozone}
                      maxCompleted={100} className="statusBar" height="40px" baseBgColor="#8BC34A" isLabelVisible="true" customLabel="•" labelSize="240px" />
                    </div>
                  </div>
            ))}
          </div>
        )
    }
  }
  
  

export default App;