React confirm alert getting blocked by bootstrap modal

Question

I'm using bootstrap modal in a react app. I need to ask user for a confirmation after they click on save button of the modal. To accomplish this, I'm using react react-confirm-alert but the dialog box keeps on opening behind the modal. I inspect both the elements and the .modal-backdrop class has a z-index of 1040 while the react-confirm-alert-overlay class has a z-index of 99 both of which I'm unable to override. I created a custom class with z-index 9999 and tried to add this class on the confirm alert (code pasted below) but the class never gets applied on the confirmAlert. Can anyone assist me with this TIA.

.overlayClass {
    z-index: 9999 !important;
}

confirmAlert({
            title: 'Save Confirmation',
            message: 'There may be records with this configuration, saving this will update all those records. Are you sure you wish to update?',
            buttons: [
                {
                    label: 'Yes',
                    className: 'text',
                    onClick: () => {
                        this.handleSubmit();
                    }
                },
                {
                    label: 'No',

                }
            ],
            overlayClassName: "overlayClass"
        });