Custom Dialog Not Displaying

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",

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

<div className='dialog_container'>
            <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>

Any reason for this?