I'm using the function like this:

  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}
   />

However, it does not provide a good user experience for the following reasons:

1. The cursor "|" always goes to the last character;
2. It is not possible to use the delete/backspace key;
3. The user always has to take the cursor to the decimal place he wants to change;

How do I make it a "fluid" experience, where it's possible to easily change the values ​​delete them for the user?