Clean way to implement messagebox pattern in react

Is there a clean way to implement a message box pattern in react like so?

import MessageBox from "MessageBox";

class MyComponent {
    render () {...}
    onDeleteButtonClick = async (data) => {

      let result = await  MessageBox.show("Delete?", "Sure you want to delete   this?", MessageBox.Buttons.OkCancel);

      if(result === MessageBox.Result.Ok) {
        // do delete
      }

    }

There does not seem to be a way to this without resorting to refs, breaking promise rules (making deferreds), or doing DOM trickery (having a wrapper that renders a component).

I built a component that followed my API above, except with a callback, but it required a ref and felt like I wasn't building things the react way.