Estoy trabajando en un componente cuyo valor de formato se representa en diferentes formatos, como dólar y euro, con comas y puntos. Tengo una entrada de dólar en funcionamiento, sin embargo, mi entrada de euro no funciona y la entrada no obtiene los valores correctos que ingresé, he intentado diferentes soluciones pero no puedo encontrar la pieza que falta. Esta es la versión muy minimizada del componente y el enlace de sandbox. Gracias por adelantado.

Caja de arena https://codesandbox.io/s/elated-sea-7328g?file=/src/App.js

 import "./styles.css"; import {useState} from "react"; export default function App() { const [inputValue, setInputValue] = useState(""); const [inputUsdValue, setinputUsdValue] = useState(""); const currencyFunction = (formatData) => { return new Intl.NumberFormat('it-IT').format(formatData) } const currencyFunctionDolar = (formatData) => { return new Intl.NumberFormat('en-US').format(formatData) } return ( <div className="App" style={{display: "flex", flexFlow: "column"}}> <h1>Test component</h1> <p>Euro format</p> <p>Euro format example {currencyFunction(123456789)}</p> <input value={currencyFunction(inputValue)} onChange={e => { setInputValue(e.target.value.replace(/,/g, '.').replace(/([a-zA-Z ])/g, "")) }} style={{marginBottom: 20}} /> <p>Usd format</p> <p>Usd format example {currencyFunctionDolar(123456789)}</p> <input value={currencyFunctionDolar(inputUsdValue)} onChange={e => { setinputUsdValue(e.target.value.replace(/,/g, '').replace(/([a-zA-Z ])/g, "").replace(/^0+/, '')) }} /> </div> ); }