Why can't recovery of type cursor be used with number formatting in JavaScript? And why is the number not written in the right place in this case?

Question

By following the answer to this question {How to fix cursor typewriter Jump to end Issue during convert number in JavaScript?}

When I use this with formatting and whitespace. When several numbers (more than one number) are selected and changed. It does not work properly and crashes. Sometimes even the numbers come from the first to the last and from the last to the first and get mixed up. you can see it here:

const phoneNumberInput = document.getElementById('phoneNumberInput');
let cursorStart = 0; // Variable to store the start position of the selection
let cursorEnd = 0; // Variable to store the end position of the selection

phoneNumberInput.addEventListener('input', (event) => {
  const phoneNumberValue = event.target.value;

  // Get the current cursor position
  cursorStart = phoneNumberInput.selectionStart;
  cursorEnd = phoneNumberInput.selectionEnd;

  const englishPhoneNumberValue = toEnglishDigits(phoneNumberValue);
  const numericPhoneValue = englishPhoneNumberValue.replace(/[^\d]/g, '');

  // Format the phone number
  const formattedPhoneNumber = formatPhoneNumber(numericPhoneValue);

  // Update the value
  event.target.value = formattedPhoneNumber;

  // Set the cursor position back to the original position
  phoneNumberInput.setSelectionRange(cursorStart, cursorEnd);
});

function toEnglishDigits(str) {
  // Your toEnglishDigits function remains unchanged
  const persianNumbers = ["۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹", "۰"];
  const arabicNumbers = ["١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩", "٠"];
  const englishNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];

  return str.split("").map(c => englishNumbers[persianNumbers.indexOf(c)] ||
    englishNumbers[arabicNumbers.indexOf(c)] || c).join("");
}

function formatPhoneNumber(phoneNumber) {
  // Format phone number as '#### ### ####'
  const formattedNumber = phoneNumber.replace(/(\d{4})(\d{3})(\d{4})/, '$1 $2 $3');
  return formattedNumber;
}

<input type="tel" id="phoneNumberInput" />

please see this image https://i.imgur.com/BJqyMHM.gifv

For example, I am going to change the first 2 numbers of the three middle numbers that I have chosen. But of the numbers that I write instead of them, one is placed at the beginning and one at the end! And while the typewriter is moving, the number is not written correctly in the right place.

In the GIF image as well as the code that I put, you can see many examples in which situations there is a problem.

This works perfectly fine when used in isolation. The number is written in the same place and the type indicator stays there when it is selected, but when combined with formatting, white space, and the character limit condition, it does not work properly at all. Why is that? What should be done?

So there are two problems. One is the typewriter cursor jumping to the middle, and the other is writing replacement numbers incorrectly when several of them want to be changed.