react-popup: Can't get the popup to even show

I love how your demo looks, but I can’t get the popup to even show in my own code. I have tried to add an onClick and EventListener to a button accordingly. In the EventListener I didn’t know what you were referring to by “target.offsetWidth” in you example though, so I just changed it to a “2”. Any thoughts?

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import Popup from 'react-popup';
import {Button} from 'react-bootstrap';

class ExampleComponent extends Component {

    constructor (props) {
        super(props);

        this.state = {
            events: [],
        };

        this.handleSelectEvent = this.handleSelectEvent.bind(this)
    }


 componentDidMount(){
       
        const trigger = document.getElementById('trigger');

        trigger.addEventListener('click', function (e) {
            e.preventDefault();

            Popup.create({
                content: 'This popup will be displayed right above this button.',
                buttons: {
                    right: ['ok']
                },
                noOverlay: true, // Make it look like a tooltip
                position: (box) => {
                    const bodyRect      = document.body.getBoundingClientRect();
                    const btnRect       = trigger.getBoundingClientRect();
                    const btnOffsetTop  = btnRect.top - bodyRect.top;
                    const btnOffsetLeft = btnRect.left - bodyRect.left;
                    const scroll        = document.documentElement.scrollTop || document.body.scrollTop;

                    box.style.top  = (btnOffsetTop - box.offsetHeight - 10) - scroll + 'px';
                    box.style.left = (btnOffsetLeft + 1 - (box.offsetWidth / 2)) + 'px';
                    box.style.margin = 0;
                    box.style.opacity = 1;
                }
            });
        });
    }

  handleSelectEvent() {

        Popup.create({
            className: 'prompt'
        });
        Popup.alert('Hello, look at me');

        let mySpecialPopup = Popup.register({
            title: 'I am special',
            content: 'Since I am special you might need me again later. Save me!',
            buttons: {
                left: ['cancel'],
                right: ['ok']
            }
        });

        Popup.queue(mySpecialPopup);
    }


    render() {
        return (
            <div>
                <Popup
                    className="mm-popup"
                    btnClass="mm-popup__btn"
                    closeBtn={true}
                    closeHtml={null}
                    defaultOk="Ok"
                    defaultCancel="Cancel"
                    wildClasses={false}/>
                <Button id='trigger' onClick={this.handleSelectEvent}/>
            </div>

        );
    }
}

export default ExampleComponent;