TextField does not accept numeric value when using react-number-format

[Azeem Haider]

Current Behavior 😯

I'm using react-number-format library if numeric values is set to TextField it will not show any error after reset the form.

Expected Behavior 🤔

It should accept the numeric values also like other string values

Steps to Reproduce 🕹

Here is my code you are reproduce error from this.

Formik Form

<Formik
      enableReinitialize
      initialValues={{
        area: "",
        password: "",
      }}
      validate={(values) => {
        const errors: Partial<Values> = {};
        if (!values.area) {
          errors.area = "Required area";
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting, resetForm }) => {
        setTimeout(() => {
          setSubmitting(false);
          console.log(JSON.stringify(values, null, 2));
          resetForm();
        }, 500);
      }}
    >
      {({ submitForm, isSubmitting }) => (
        <Form>
          <Field
            component={TextField}
            name="area"
            label="area"
            InputProps={{
              inputComponent: NumberField,
            }}
          />
          <br />
          <Field
            component={TextField}
            type="password"
            label="Password"
            name="password"
          />
          {isSubmitting && <LinearProgress />}
          <br />
          <Button
            variant="contained"
            color="primary"
            disabled={isSubmitting}
            onClick={submitForm}
          >
            Submit
          </Button>
        </Form>
      )}
    </Formik>

NumberField

import NumberFormat from "react-number-format";

interface NumberFieldProps {
  name: string;
  inputRef: (instance: NumberFormat<any> | null) => void;
  onChange: (event: {
    target: { name: string; value: number | undefined };
  }) => void;
}

export default function NumberField(props: NumberFieldProps) {
  const { inputRef, onChange, ...other } = props;

  return (
    <NumberFormat
      {...other}
      getInputRef={inputRef}
      onValueChange={(values) => {
        onChange({
          target: {
            name: other.name,
            value: values.floatValue,
          },
        });
      }}
    />
  );
}

Click on submit button and you will see Required area error, Set value in area field and submit form, it submit the form and reset it after that click again on submit button you will see it will not give you Required area error. I don't know why this happen.

Now change value: values.floatValue to value: values.value in NumberField file and everything work well. I don;t know why it is not working when I set floatValue I need numeric values not string.