Modal pop up not being opened in mobile in reactjs

Question

I created a search modal pop up in my website using reactjs. it is working perfect in the desktop version. But when I switch to the mobile version it does not work and doesn't open the modal, in other sense it doesn't add the class open to the div.

I am adding and removing the class on the click of the icon of the search. but on mobile it doesn't seem to work.

Why is that?

Here is my code:

'use strict';

class Search extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            results: [],
            search: false,
        };

        this.search = this.search.bind(this);
    }

    componentDidMount() {
        let opener = document.querySelector('.search-opener');

        if (! opener){
            console.log("Cant Work")
            return;
        }

        opener.addEventListener('click', () => {
            document.querySelector('#searchPopup').classList.add('open');
        });

        document.querySelector('.search-box .close').addEventListener('click', () => {
            document.querySelector('#searchPopup').classList.remove('open');
        });
    }

    componentDidUpdate() {
        if (AOS) {
            AOS.refreshHard();
        }
    }

    search(e) {
        if (! e.target.value) {
            this.setState({
                results: [],
            });

            return;
        }

        this.setState({
            searching: true
        });

        fetch(`${mywebsitename.homeUrl}/wp-json/mywebsitename/v1/search/?term=${e.target.value}`)
            .then(response => response.json())
            .then(results => {
                this.setState({
                    results,
                    searching: false,
                });
            });
    }

    getBadgeColor(postType) {
        if (postType === 'page') return 3;
        if (postType === 'shop') return 2;
        if (postType === 'event') return 1;
        if (postType === 'post') return 5;
    }

    render() {
        let aosDuration = 0;
        let fakeEl = jQuery('<x>');

        return (
            <div className="search-box">
                <div className="close mb-1">
                    <i className="mdi mdi-close mdi-24px"></i>
                </div>
                <div className="form-group">
                    <input type="search" className="form-control search-input" id="searchInput" aria-describedby="searchHelp" placeholder="Type something.." onInput={this.search} />
                    <small id="searchHelp" className="form-text text-muted">Search...</small>
                </div>
                {
                    this.state.searching ? 
                    <div className="text-center text-color-7 mb-5">
                        <i className="mdi mdi-loading mdi-spin mr-2"></i> Searching..
                    </div> :
                    <ul className="results list-reset">
                        {this.state.results.map(result =>
                            <li key={result.ID} className="d-flex align-items-start" data-aos="fade-up" data-aos-duration={aosDuration+=150}>
                                <span className={`badge border border-color-${this.getBadgeColor(result.post_type)}-dark text-color-${this.getBadgeColor(result.post_type)}-dark mr-3`}>{result.post_type}</span>
                                <h6><a href={fakeEl.html(result.guid).text()}>{result.post_title}</a></h6>
                            </li>
                        )}
                    </ul> 
                }
            </div>
        );
    }
}

let el = document.createElement('div');
el.id = 'searchPopup';
el.classList.add('search-popup');
document.querySelector('#page').prepend(el);

ReactDOM.render(React.createElement(Search), el);