Custom Dialog Not Displaying

Questions
1

I am new to working with Dialogs and particularly custom Dialogs. My code is below for reactjs:

componentDidMount() {
    this.dialog = f7.dialog.create({
      el: ".dialog_container",
    });
    this.dialog.open();
  }

The HTML below can be found in the return();

<div className='dialog_container'>
          <Block>
            <h1 className='title_bigger_scalable_font_size'>Are you still here?</h1>
            <br />
            <div className='grid grid-cols-2 grid-gap'>
              <Button round large className="no-ripple" style={{ backgroundColor: "white" }}><h2>No</h2></Button>
              <Button round large className="no-ripple" fill><h2>Yes</h2></Button>
            </div>
          </Block>
        </div>

Any reason for this?