Сохранять немаскированное значение InputMask в Formik и Material-UI

Question

Хорошо, у меня есть эта реализация маски ввода поверх пользовательской стилизованной реализации текстового поля пользовательского интерфейса материала внутри формы Formik:

<InputMask
                        mask="999-99-9999"
                        maskChar="X"
                        value={values.ssn}
                        onChange={handleChange}
                        onBlur={handleBlur}
                        className={classNames(
                          styles.inputField,
                          styles.override
                        )}
                      >
                        {() => (
                          <LNTextField
                            name="ssn"
                            label="Social Security Number"
                            error={touched.ssn && errors.ssn ? true : false}
                            helperText={
                              touched.ssn && errors.ssn ? "* " + errors.ssn : ""
                            }
                            type="text"
                          />
                        )}
                      </InputMask>

Проблема теперь заключается в том, что в values.ssn значениесохраненный с маской, с дефисами и всем, я хотел бы вместо этого, чтобы это было сохранено как число / строка без пробелов / масок, как бы я поступил об этом?

Answer 1

За пример кода комментария @Kiran LM, это было достигнуто путем добавления этого вместо существующего onChange, а также деструктурирования setFieldValue из Formik

                      onChange={e => {
                        const value =
                          e.target.value
                            .replace(/-/g, "")
                            .replace(/X/g, "") || "";
                        setFieldValue("ssn", value);
                      }}

Большое спасибо им.