我已经创建了一个输入，它为用户输入的字符添加千位分隔符。我已经实现了代码，以防止在代码添加或删除千位分隔符时光标在输入的末尾重新定位自己。但是，当光标直接放置在千位分隔符之前或之后时，分别按delete或backspace键不会删除字符。如何修改代码以启用此功能？
另外，在React中是否有一种简洁的方法来创建具有这些功能的输入？
代码如下：

import React, { useState, useRef } from 'react';

const NumericInput = () => {
  const [value, setValue] = useState('');
  const inputRef = useRef(null);

const onKeyDown = (e) => {
  const inputElement = inputRef.current;
  const caretStart = inputElement.selectionStart;
  const caretEnd = inputElement.selectionEnd;

  if (e.key === 'Backspace' && caretStart === caretEnd && caretStart > 0) {
    const previousChar = inputElement.value.charAt(caretStart - 1);
    if (previousChar === ',' || previousChar === ' ') {
      e.preventDefault();
      inputElement.setSelectionRange(caretStart - 1, caretEnd - 1);
      return;
    }
  }

  if (e.key === 'Delete' && caretStart === caretEnd && caretEnd < inputElement.value.length) {
    const nextChar = inputElement.value.charAt(caretStart);
    if (nextChar === ',' || nextChar === ' ') {
      e.preventDefault();
      inputElement.setSelectionRange(caretStart + 1, caretEnd + 1);
      return;
    }
  }

  if (!/^-?\d*$/g.test(value) && e.key !== '-' && e.key !== 'Backspace') {
    e.preventDefault();
  }
};

  const onChange = (e) => {
    const inputValue = e.target.value.replace(/[^0-9-]/g, '');
    setValue(inputValue);

    const inputElement = inputRef.current;
    const caretPosition = Math.max(0, inputElement.selectionStart + (formatValue(inputValue).match(/,/g) || []).length - (formatValue(value).match(/,/g) || []).length);
    inputElement.value = formatValue(inputValue);
    inputElement.setSelectionRange(caretPosition, caretPosition);
  };

  const formatValue = (value) => (value ? value.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '');

  return (
      <input
        ref={inputRef}
        placeholder='Type Number'
        type='text'
        onKeyDown={onKeyDown}
        onChange={onChange}
        value={formatValue(value)}
      />
  );
};

export default NumericInput;

任何帮助将不胜感激。谢谢！