Dependent field example formik help

[rclarkem]

Dependent Field Formik EX

I have never worked with Formik before and was trying to implement a dependent field use case.

I have been following the example above but the issue I am having is that everything works where I have the ability to then edit the field that relies on the name and an id fields but once I go to submit my form, that is where I run into issues. I should mention this form already has data in it. It is an update action with pre-populated data in it. Once I hit submit, It resets the form back to what the setFieldValue URL is in the useEffect even if I have previously changed it but didn't touch the name or id fields at all.

It seems to be touching the fields upon submission. Any guidance would be greatly appreciated.

const AutoGenerateFieldPubs = (props) => {
    const {
      values: { name, id },
      touched,
      errors,
      setFieldValue,
    } = useFormikContext();
    const [field] = useField(props);
    useEffect(() => {
      if (
        name.trim() !== '' &&
        id.trim() !== '' &&
        touched.name &&
        touched.id
      ) {
        setFieldValue(
          props.name,
          `http://this-website/uploads/${name}/${id}/`
        );
      }
    }, [name, touched.name, touched.id, id, setFieldValue, props.name]);

    return (
      <>
        <TextField
          {...props}
          {...field}
          required
          InputLabelProps={{
            classes: {
              asterisk: classes.asterisk,
            },
          }}
          inputProps={{ className: classes.textColor }}
          error={touched[field.name] && Boolean(errors[field.name])}
          helperText={touched[field.name] && errors[field.name]}
        />
      </>
    );
  };