Calling setFieldValue puts the Value Overlaying the Label

[allidoisace]

I am not too sure what is going on, but the field's label stays in the field with the value overlaid on top of it. It only puts the label above the field if I actually type something in.

...

  const setAge = async ({
    setFieldValue,
    age
  }: any) => {
    try {
      setFieldValue("age", age);
    } catch (e: any) {
      console.error(e);
    }
  };

  return (
      <Formik
        initialValues={props.initialValues || {}}
        onSubmit={props.handleSubmit}
        validateOnMount={true}
      >
        {formikProps => (
          <Form>
              <Grid container spacing={2}>
                <Grid
                  item
                  xs={6}
                >
                  <Button
                    color="secondary"
                    onClick={() =>
                      setAge({
                        setFieldValue: formikProps.setFieldValue,
                        age: props.age,
                      })
                    }
                  >
                    Test Button
                  </Button>
                </Grid>
                <Grid item lg={3} md={3} sm={6} xs={12}>
                  <Field
                    component={TextField}
                    label="Age"
                    name="age"
                    margin="dense"
                    type="number"
                    InputProps={{
                      inputProps: {
                        step: 'any',
                      },
                    }}
                    fullWidth
                  />
                </Grid>
          </Form>
         }
      </Formik>
 )

[allidoisace]

The only way to resolve (something to do with MUI and the possibility of the field being null or undefined) is to add the following in the Field component:

{formikProps.values.age || ""}