How to stop a function on button click in react JS

I am calling a function from sort.jsx

<button onClick={() => onBubbleSort()}>Bubble sort</button>

and function definition is:

BubbleSort() {
    // console.log(this.state.animationSpeed)
    let bar = document.getElementsByClassName("arrayElement");
    let mySortedArray = bubble.bubblesort(this.state.array, bar, (arr) => {
      this.setState({ array: arr });
    },this.state.animationSpeed);
  }

Which is then calling a bubble sort function in another file bubbleSort.js

async function bubblesort(array1, element, setState, speed) {
  let compareSpeed = speed * 1.5;
  let swapSpeed = speed * 2;
  let isLessSpeed = speed * 3;
  let temp;
  let array = array1;
  document.getElementById("captions").innerText =
    "Lets's start sorting with Bubble sort!!!";
  await pauseIt();
  for (let i = 0; i < array.length - 1; i++) {
    for (let j = 0; j < array.length - 1 - i; j++) {
      await compare(element[j], element[j + 1], compareSpeed);
      if (array[j] > array[j + 1]) {
        await isLess(element[j], element[j + 1], isLessSpeed);
        temp = array[j];
        array[j] = array[j + 1];
        array[j + 1] = temp;
        await swap(element[j], element[j + 1], swapSpeed);
        unselect(element[j], element[j + 1],compareSpeed);
        setState(array);
      } else {
        unselect(element[j], element[j + 1],compareSpeed);
      }
    }
    let k = array.length - i - 1;
    element[k].style.backgroundColor = "green";
    if (speed >= 500) await success(i + 1);
  }
  element[0].style.backgroundColor = "green";
}

I want to stop the execution of this function on a buttoon click.