React-input-mask не обрабатывает formatChars

export const LabelRangeInputTime = ({
  onChange, 
  label,
  value,
  name
}: ILabelRangeInput) => {
  const [val, setVal] = useState(durationToTime(value as number));
  const debouncedValue = useDebounce<number | string>(val, 500);

  const changeHandler = (evt:  React.ChangeEvent<HTMLInputElement>) => {
    setVal(evt.target.value); 
    // onChange(timeToDuration(evt.target.value as string))  
  };

  useEffect(() => {
    onChange(timeToDuration(debouncedValue as string))
  }, [debouncedValue]);

  let mask = 'nm:we';
  let formatChars = {
    'n': '[0-2]',
    'm': '[0-9]',
    'w': '[0-5]',
    'e': '[0-9]'
  };
  let beforeMaskedValueChange = (newState: any, oldState: any, userInput:any) => {
    let { value } = newState;

    // Conditional mask for the 2nd digit base on the first digit
    if(value.startsWith('2'))
      formatChars['m'] = '[0-3]'; // To block 24, 25, etc.
    else
      formatChars['m'] = '[0-9]'; // To allow 05, 12, etc.
    return {value, selection: newState.selection};
  }
  

  return (
    <label className="range__label">
      <InputMask
        mask={mask}
        className="range__input" 
        value={val} 
        type="text" 
        name={name}
        // @ts-ignore
        // formatChars={formatChars}
        formatChars={formatChars}
        beforeMaskedValueChange={beforeMaskedValueChange}
        onChange={(evt) => changeHandler(evt)} 
      />
      <span>{label}</span>
    </label>
  )
};