unfortunately there are a few issues here:

1. This breaks the arrow buttons functionality in general due to the wrong value being referenced in the onStep function
2. I believe it's makes things more predictable / cleaner to cast the value to string only in the JSX and to number only in the onChange handler (ultimately, only where really necessary), then record "empty string" as an exception
3. It results in a buggy feeling UX if the user clicks an arrow when the input value is '0' or '-' (the blur restores the initial value and then "steps it"), in the below changes I've made sure to disable the steppers when an invalid value is in the input
4. the value is passed as prop from the parent, when it changes it should reset the internal state, we should use the concept of an initialValue together with a key attribute in the stepper JSX to achieve this, the internal state does not need to be updated when setSettingsStateValue is invoked as doing should trigger a reset anyway

I pushed some changes to a different branch here which resolve the above:
ce3b47b
There is also a small styling change as I noticed the position of the arrow buttons container was wrong in the font size stepper.

 const setValidValue = (value: number): void => {
 const clampedValue = clamp(value, minValue, maxValue);
 setValueState({ currentValue: clampedValue, isEmptyString: false });
 setSettingsStateValue(clampedValue);
 };

this doesn't feel right, if the value has changed setSettingsStateValue resets the whole component as well as the internal state (because it changes the jsx key), thus setting the internal state shouldn't be necessary, if we're having to do this things are likely muddled and we probably need to rethink the lifecycle

It works for me. Thank you!

Now it works perfectly for me. Thanks @AlbyIanna 🙂