react-portal onOpen Not Firing - react-portal

Question

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.

Answer 1

Ended up realized it's due to openByClickOn no longer supported. As explained in:
openByClickOn Not Supported In React-Portal v4