I have a date input with react-input-mask.

Here is my code:

   <div className="date-picker-container" tabIndex={1}>
      <InputMask
        className={className}
        id={id}
        onKeyDown={(e) => disabledInput && e.preventDefault()}
        mask="XX.XX.XXXX"
        formatChars={{
          X: "[1-31]",
          X: "[1-12]",
          X: "[1-2200]",
        }}
        {...register(name, validation)}
        value={innerValue}
        onChange={handleInputChange}
        placeholder="gün.ay.il"
        onClick={
          className.includes("is-invalid") ? () => setFocused(true) : () => {}
        }
      />
      <span className="date-icon" onClick={() => setFocused(!focused)}>
        <Calendar />
      </span>
      <div className={focused ? "d-block" : "d-none"}>
        <CR
          locale={locale}
          date={date}
          maxDate={maxDate || null}
          minDate={minDate}
          onChange={handleChange}
          displayMode="date"
        />
      </div>
    </div>

With the 'formatChars' property in reac-input-mask, I want to write a regex to the data that the user will type with the keyboard.

for example. the user can write max 31 for the number of days, max 12 for the month, and 2200 for the year.

I tried the way I specified in the example, but I couldn't get the result I wanted. how can I do that?