A form is state, semantics and feedback

First, build a mental model

A controlled input displays the value owned by React state. The browser event reports a proposed change; your handler updates that state. Labels and feedback make the workflow understandable.

1. Pair value with an onChange that updates the owning state.
2. Keep editable text as text until an explicit validation/conversion boundary.
3. Use a real form and submit button for expected browser/keyboard behavior.
4. Associate errors and labels with inputs and preserve a clear focus path.

function QuantityForm() {
  const [text, setText] = useState('1');
  const quantity = Number(text);
  const valid = text.trim() !== '' && Number.isInteger(quantity) && quantity > 0;
  return <form onSubmit={event => { event.preventDefault(); if (valid) save(quantity); }}>
    <label htmlFor='quantity'>Quantity</label>
    <input id='quantity' value={text} onChange={event => setText(event.target.value)} inputMode='numeric' aria-describedby='quantity-help' />
    <p id='quantity-help'>Enter a positive whole number.</p>
    <button type='submit' disabled={!valid}>Save</button>
  </form>;
}

1. Type

   The input can temporarily hold empty or incomplete text.

2. Validate

   Only a nonempty positive whole number is acceptable.

3. Submit

   The workflow prevents navigation and commits only a validated value.