'Clicking up arrow on a react IMask number input breaks on safari

I have an integer input using react-imask, which works fine on google chrome. However on safari, when I click the arrows without focusing on the input first, (say from 10 to 11), it will add the new value to the start of the input i.e 1110.

These are my props being passed in:

 <InputInteger
                  required={true}
                  className={"w-[65px] text-center"}
                  min={0}
                  value={updatedStock}
                  onChange={(e) => setUpdatedStock(parseInt(e.target.value))}
               
                />

and this is the InputInteger component:

  <IMaskInput
    {...props}
    mask={Number}
    scale={0}
    lazy={false}
    min={props.min ?? 0}
    max={props.max ?? 9999}
    radix={"."}
    signed={false}
    mapToRadix={[","]}
    inputMode={"numeric"}
    value={props?.value?.toString()}
    onAccept={(value) => {
      if (!props.onChange) return;
      if (value === "0" && !props?.required) value = "";
      const payload = { target: { value: value } };
      return props.onChange(payload);
    }}
    onChange={undefined}
  />