ReactJS, Show Modal on Top of Another Modal

I am trying to display a modal component on top on another modal component. When a button inside class ChannelDetail (first modal) is clicked, another modal is supposed to open on top (class Modal). However, it is opening behind the first modal and the states from the first modal is not properly being passed to the second modal. How can I get the second modal to open properly with the proper props?

import React, { Component } from 'react'
import './style.css'
import { ExcelRenderer} from 'react-excel-renderer';
import Modal from './Modal'

export class ChannelDetail extends Component {

    state = { rows: [], cols: [], outage: '', d: 'ande' };

    showOutageFiles = (e) => {
      e.preventDefault(); 
      this.setState({ outage: e.target.value })
      document.querySelector('.bg-modal-outage').style.display = 'block';
    }

    fileHandler = (event) => {
        let fileObj = event.target.files[0];
        //just pass the fileObj as parameter
        ExcelRenderer(fileObj, (err, resp) => {
          if(err){
            console.log(err);            
          } else{
            this.setState({
              cols: resp.cols,
              rows: resp.rows
            });
          }
        });               
    }

    render() {
      const { channelSelectedData } = this.props
       if (this.props.channelSelectedData.length >= 1 && this.props.datatype != 'slar'){         
            return(
              <div>
                <div> <Modal data={this.state.outage} type={this.state.d}/> </div>
                <div className="channel-detail-box">
                      <p>Channel Selected: {this.props.channelSelectedData[0].channel}</p>
                      <p>Inspected: {this.props.channelSelectedData.length} time(s)</p>
                      <p>Last Inspection Date: {this.props.channelSelectedData[0].scanned}</p>
                      <p>Outages: {channelSelectedData.map(({ outage }) => <button value={outage} onClick={this.showOutageFiles}>{outage + ', '}</button>)}</p>
                </div>      
              </div>
            )
        } else {
            return (
                <div>
                    <p>No data found</p>
                </div>
            )
        }
    }
}

export default ChannelDetail

import React, { Component } from 'react'
import './style.css'

export class Modal extends React.Component {

    // closes modal for outage files 
    hideOutageFile = () => {
        document.querySelector('.bg-modal-outage').style.display = 'none';
    }

    render () {

         // ANDE reports linked on the outage modal popup
         const reportsANDE = {
            'P1-1987': 'http://192.168.191.128:8080/P-IR-1-03650-1_R000(P1-1987).pdf',
            'P1-1992': 'http://192.168.191.128:8080/PA-IR-92-1-03640-31_R001(P1-1992).pdf',
            'P0211': 'http://192.168.191.128:8080/NA44-IR-03641-00001_R001(P0211).pdf',
            'P1011': 'http://192.168.191.128:8080/NA44-IR-31100-00002.pdf',
        }

        // ANDE excel files linked on the outage modal popup
        const excelANDE = {
            'P1-1987': 'http://192.168.191.128:8080/Historical_Directory_PNGS_1-2018.xlsx',
            'P1-1992': 'http://192.168.191.128:8080/Historical_Directory_PNGS_1-2018.xlsx',
            'P0211': 'http://192.168.191.128:8080/Historical_Directory_PNGS_1-2018.xlsx',
            'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
        }

        const prop = 'text-align';
        const textStyle = { [prop]: 'center' };
        console.log(this.props.data)

        // Modal popup for downloading ANDE outage files
        if (this.props.type === 'ande'){
            return (
                <div className="bg-modal-outage">
                    <div className="modal-outage-content">
                        <span className="close-Btn" onClick={this.hideOutageFile}>&times;</span>
                        <h2 style={textStyle}>{this.props.data}</h2>
                        <p> 
                            <a href={excelANDE[this.props.data]}>Download Spreadsheet <i class="fas fa-file-excel"></i></a> <br/> 
                            <a href={reportsANDE[this.props.data]}> Download Report <i class="fas fa-file-pdf"></i></a>
                        </p> 
                    </div>
                </div> 
            )
        }
    }
}

export default Modal