react-portal onOpen Not Firing

Been trying to migrate from react-portal from v2 to v4, due to recent upgrade of React to 16.8.6.

Stucked at Portal, whereby the dialog box doesn't show up even when isOpen=true. Found out that onOpen is not firing. Any suggestion on how should I change the codes?

import * as React from 'react';
import { Portal } from 'react-portal';

import 'dialog-polyfill/dialog-polyfill.css';
import 'dialog-polyfill/dialog-polyfill.js';

import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from 'react-mdl';

class Confirm extends React.Component {
  onOpen() {
    if (!this.dialog.showModal) {
      dialogPolyfill.registerDialog(this.dialog);
    }

    this.dialog.showModal();
  }

  closeDialog() {
    this.dialog.close();
    this.portal.closePortal();
  }

  render() {
    const props = this.props;

    return (
      <Portal ref={c => this.portal = c} onOpen={this.onOpen.bind(this)} isOpen={Boolean(props.callback)} {...props}>
        <dialog ref={c => this.dialog = c} className="mdl-dialog" style={props.style}>
          <DialogTitle>{props.title}</DialogTitle>
          <DialogContent>
            {props.message}
          </DialogContent>
          <DialogActions>
            <Button type='button' onClick={() => {this.closeDialog(); props.confirm();}}>Confirm</Button>
            <Button type='button' onClick={() => {this.closeDialog(); props.dismissConfirmation();}}>Cancel</Button>
          </DialogActions>
        </dialog>
      </Portal>
    );
  }
}

export default Confirm;

Expected Result: A confirmation dialog box to pop up.

From browser, already can see the dialog box is there by modifying the css.

Ended up realized it's due to openByClickOn no longer supported. As explained in:

openByClickOn Not Supported In React-Portal v4