Estoy usando la función como esta:

 const handleOnChangeSpread = useCallback((spread) => {
 const NEW_SPREAD_VALUE = new Intl.NumberFormat('pt-BR', {
 useGrouping: true,
 minimumFractionDigits: 2,
 maximumFractionDigits: 2
 }).format(spread).replace(",", ".");

 setSpread(NEW_SPREAD_VALUE);
 }, []);

 <input
 onChange={({ target: { value }}) => handleOnChangeSpread(value)}
 type="number"
 min={0}
 max={20}
 maxlength={5}
 value={spread}
 />

Sin embargo, no proporciona una buena experiencia de usuario por las siguientes razones:

1. El cursor "|" siempre va al último carácter;
2. No es posible utilizar la tecla de borrar/retroceso;
3. El usuario siempre tiene que llevar el cursor al lugar decimal que quiere cambiar;

¿Cómo hago para que sea una experiencia "fluida", donde es posible cambiar fácilmente los valores y eliminarlos para el usuario?