Así que estoy usando la biblioteca NumberFormat para crear un marcador de posición, pero no funciona como quería que funcionara y no encuentro el motivo. El comportamiento del campo de entrada es bastante extraño. El "$0", que debería comportarse como un marcador de posición, se comporta como un carácter, por lo que si el usuario escribe "120", la cantidad en realidad será "1200".

Aquí hay un video de cómo funciona: https://media.giphy.com/media/sptBQiYqQr3B54rJFu/giphy.gif

Pero el comportamiento correcto sería, cuando hay un 0 y el usuario ingresa un valor, el 0 debe ser reemplazado (puede consultar la calculadora de Google, hace eso).

 <NumberFormat defaultValue={undefined} value={payoutInputValue} displayType="input" thousandSeparator decimalScale={2} prefix={getCurrencySymbol(currency)} allowLeadingZeros={false} allowNegative={false} getInputRef={numberInputRef} onValueChange={(values) => setPayoutInputValue(values?.floatValue || undefined) } disabled={disabled || isLoading} isAllowed={isDrawAmountAllowed(0, currency)} required />

y la función setPayoutInputValue:

 const [payoutInputValue, setPayoutInputValue] = useState<number>( payout === 0 && isAmountParamValid ? amountParamParsed : payout );

No tengo mucha experiencia con React, por lo que si pudiera responder con términos básicos, sería increíble. ¡Gracias!

EDITAR: ¡Logré hacerlo funcionar! atributo de marcador de posición agregado y valor = {indefinido}