For example I have an input field, so I have entered 100000 in that text. While entering value, I am trying to format 100,000. so if I try to change the value to 100,200, the cursor automatically moved to the end of the text box, so I have tried some solution but I will create another issue.

I have tried this solution, it will create issue like the cursor behind one digit before.

        const element = event.target;
        window.requestAnimationFrame(() => {
          element.selectionStart = caretStart;
          element.selectionEnd = caretStart;
        });

 const formatValue = (value: string) => {
    const isDecimalExist = value.split('.');
    if (isDecimalExist.length === 2 && props.decimalPlaces) {
      const formatedValue = `${isDecimalExist[0].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}.${
        isDecimalExist[1]
      }`;
      return formatedValue;
    } else {
      return (value || '')
        .split('.')[0]
        .toString()
        .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }
  };