How to change Form initialValues and Fields based on selection in ReactJS?

I have an object like this :

const initialValues = {
    "Name": "",
    "Price": "",
    "Quantity": "",
    "Details": {
        "Light": "",
        "Watering": "",
        "Maintenance": "",
        "WhereToGrow": "",
    },
    "BrowseImg": "",
    "MainImg": "",
    "Tags": "",
    "Category": "Plant",
    "SubCategory": ""
}

I am using React Formik library in my Form Component, I am rendering selection& Details object like this:

  <Grid item xs={6}>
    <FormControl required>
      <InputLabel id="demo-simple-select-required-label">Category</InputLabel>
      <Select
        labelId="demo-simple-select-required-label"
        id="demo-simple-select-required"
        value={values.Category !== "undefined" ? values.Category : ""}
        label="Category *"
        onChange={(e) => {
          setFieldValue("Category", e.target.value);
        }}
        autoWidth
        name="Category"
        defaultValue=""
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={"Plant"}>Plant</MenuItem>
        <MenuItem value={"Planters"}>Planters</MenuItem>
        <MenuItem value={"Seeds"}>Seeds</MenuItem>
      </Select>
    </FormControl>
  </Grid>
  <FieldArray name="Details">
    <Grid container spacing={2} sx={{ padding: "20px" }}>
      <Grid item xs={12}>
        <Typography>Details</Typography>
      </Grid>

      <Grid item xs={6}>
        <TextFieldWrapper
          name={
            values.Category !== "Planters"
              ? `Details.Light`
              : `Details.Material`
          }
          label={values.Category !== "Planters" ? `Light` : "Material"}
        />
      </Grid>
      <Grid item xs={6}>
        <TextFieldWrapper
          name={
            values.Category !== "Planters"
              ? `Details.Watering`
              : `Details.Build`
          }
          label={values.Category !== "Planters" ? `Watering` : "Build"}
        />
      </Grid>
      <Grid item xs={6}>
        <TextFieldWrapper
          name={
            values.Category !== "Planters"
              ? `Details.Maintenance`
              : `Details.PlanterHeight`
          }
          label={
            values.Category !== "Planters" ? `Maintenance` : "Planter Height"
          }
        />
      </Grid>
      <Grid item xs={6}>
        <TextFieldWrapper
          name={
            values.Category !== "Planters"
              ? `Details.WhereToGrow`
              : `Details.PlanterWidth`
          }
          label={
            values.Category !== "Planters" ? `Where To Grow` : "Planter Width"
          }
        />
      </Grid>
    </Grid>
  </FieldArray>

Now, I need to change initialValues object when "Planters" is selected to :

{
    "Name": "",
    "Price": "",
    "Quantity": "",
    "Details": {
        "Material": "",
        "Build": "",
        "PlanterHeight": "",
        "PlanterWidth": ""
    },
    "BrowseImg": "",
    "MainImg": "",
    "Tags": "",
    "Category": "Planters",
    "SubCategory": ""
}

I tried this to change key Name in initialValues object like this:

    const Context = () => {
      const { values } = useFormikContext();

      useEffect(() => {
        if (values.Category === "Planters") {
          delete Object.assign(initialValues.Details, {
            Material: initialValues.Details.Light,
          })["Light"];
          delete Object.assign(initialValues.Details, {
            Build: initialValues.Details.Watering,
          })["Watering"];
          delete Object.assign(initialValues.Details, {
            PlanterHeight: initialValues.Details.Maintenance,
          })["Maintenance"];
          delete Object.assign(initialValues.Details, {
            PlanterWidth: initialValues.Details.WhereToGrow,
          })["WhereToGrow"];

          console.log("VALUES FORMIK CONTEXT", values);
          console.log("INITIALVALUES", initialValues);
          console.log(
            "INITIAL VALUES DETAILS ",
            initialValues.Details.Material
          );
        }
      }, [values]);
      return null;
    };

changing name when values.Category is Planters throws Formik Error as follows:

Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

How do I achieve this? Thanks in advance!