ProfileForm.tsx

function ProfileForm(props: Props) {
  const classes = useStyles();
  const { profile } = props;
  const [updateProfile] = useMutation<UpdateProfile, UpdateProfileVariables>(
    UPDATE_PROFILE_INFORMATION
  );
  return (
    <Grid container item spacing={2} xs={12} sm={6}>
      <Typography variant="h5" gutterBottom>
        Enter the user's profile information
      </Typography>
      <Grid container item xs={12}>
        <Formik
          onSubmit={async values =>
            updateProfile({
              variables: {
                input: {
                  ...values
                }
              }
            })
          }
          initialValues={...profile}
          validationSchema={ProfileFormSchema}
        >
          {props => (
            <Grid item xs={12}>
              <Field name="name">
                {({ field, form: { isSubmitting }, meta }: FieldProps) => (
                  <TextField
                    className={classes.textInput}
                    {...field}
                    disabled={isSubmitting}
                    error={!!meta.error}
                    helperText={meta.error}
                  />
                )}
              </Field>
              <Button onClick={() => props.handleSubmit()}>Submit</Button>
            </Grid>
          )}
        </Formik>
      </Grid>
    </Grid>
  );
}