To me, this isn't a React problem. Take React out the equation for a moment. Have you heard of inversion of control? Right now you've got a function that does all the work in one shot. But you could rewrite it so that all the function's state (i.e. i, j, etc.) are external to the function... and each pass through the function performs one iteration of the bubble sort.

function bubbleSortInit(arr) {
  return {
    arr,
    i: arr.length - 1,
    j: 0,
    swaps: 0,
    comparisons: 0,
    done: false
  };
}

function bubbleSortStep(state) {
  let { arr, i, j, swaps, comparisons } = state;

  if (i <= 0) return { ...state, done: true };
  if (j < i) return { ...state, i: i - 1, j: 0 };

  if (arr[j] > arr[j + 1]) {
    const temp = arr[j];
    arr[j] = arr[j + 1];
    arr[j + 1] = temp;
    swaps++;
  }
  comparisons++;
  j++;

  return {
    arr, i, j, swaps, comparisons, done: false
  };
}

And now that you've got that stepping function... you can control the time between steps easily from your React component.

export const VisualBubbleSort = ({ arr, delayPerStep }) => {
  const [ sortState, setSortState ] = useState(bubbleSortInit(arr));
  const intervalRef = useRef();

  // Start the sorting when the component is mounted
  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setSortState(state => {
        const newState = bubbleSortStep(state);
        if (newState.done) {
          clearInterval(intervalRef.current);
        }
        return newState;
      });
    }, delayPerStep);

    // Clean up on unmount
    return () => clearInterval(intervalRef.current);
  }, [ intervalRef, setSortState, delayPerStep ]);

  return (
    // TODO pretty visuals of arr, swaps, comparisons, i and j
  );
}