Hice un componente para formatear el número de teléfono de XXXXXXXXXX a '(XXX) XXX-XXXX' aquí está mi código

 function formatPhoneNumber(phone) { const area = phone.slice(0, 3); const first = phone.slice(3, 6); const second = phone.slice(6, 10); let formattedTelephoneNumber = phone; if (phone.length >= 1) { formattedTelephoneNumber = `(${formattedTelephoneNumber}`; } if (phone.length >= 4) { formattedTelephoneNumber = `(${area}) ${first}`; } if (phone.length >= 7) { formattedTelephoneNumber = `(${area}) ${first}-${second}`; } return formattedTelephoneNumber; } function getRawPhoneNumber(inputValue) { return [...inputValue].filter((char) => /\d/.test(char)).join(""); } export default function App() { const [value, setValue] = useState(""); const handleInputChange = (e) => { const phoneNumber = getRawPhoneNumber(e.target.value); const formatted = formatPhoneNumber(phoneNumber); setValue(formatted); }; return ( <div className="App"> <input value={value} onChange={handleInputChange} /> </div> ); }

Funciona bien, pero cuando está escribiendo en medio de una cadena, agregue un número adicional o elimine un número, el cursor saltará hasta el final.

¿Alguien sabe cómo arreglarlo?

aquí hay una demostración en vivo con la que puedes jugar https://codesandbox.io/s/phone-number-format-x4nnk?file=/src/App.js