React - Button is not disabled during the ajax call, toast is not working

I have few buttons on the page and if I click the button ajax call is made. I want to disable the button so the user doesnt click it again and another ajax call is not made.

I tried the below code but the button is not disabling. I want to show the notification on success in react as well - I tried toast but its not working too.

Is there any other way I can show a balloon popup in react ?

Please suggest,

    onClickRun(params) {

    const url = `/api/${params}/run`;
    const id = "run"+params;
    return $.ajax({
        type: 'POST',
        url,
        processData: false,
        contentType: 'application/json',
        beforeSend :() =>{
           // $("#run"+params).classList.add("cursorDisabled");
           // $("#run"+params).attr('disabled',true);   
            document.getElementById(id).disabled = true;
            document.getElementById(id).classList.add('cursorDisabled');             
        },
        success: (response) => { 
            if(!response.error) {

                // toast({
                //     message: 'Pipeline ran successfully.',
                //     flavor: 'success',
                //     options: { timeOut: 5000 }
                // });
                //$("#"+params).classList.remove("cursorDisabled");
                //$("#run"+params).attr('disabled',false);
                document.getElementById(id).disabled = false;
                  document.getElementById(id).classList.remove('cursorDisabled'); 
                location.reload(true);
            }
        },
        error: (error) => {
            console.log("error");
        }
    });
}

CSS code :

.cursorDisabled{
    cursor: not-allowed;
    color: gray;
}

Button :

<button id= {"run"+col.name} type="button" onClick={() =>  this.onClickRun(col.name)} <i className="icon-play-filled"></i>
                                </button>

from React - Button is not disabled during the ajax call, toast is not working