Warning: Maximum update depth exceeded. in unregister setState

[wilddog93]

Hi guys, i've got Maximum update depth exceeded aka "infinite loop" in my react-lifecycle, i've handled it with unmounted but my code still error.

this bellow is my current conditional code using react-hook-form:

const ConditionZoneField = ({ control, index, register, unregister, itemIndex }: { control: Control<FormValues>; index: number; register: UseFormRegister<FormValues>; unregister: UseFormUnregister<FormValues>; itemIndex: number; }) => { const output = useWatch({ name: zones.${index}.data.${itemIndex}.room`,
control
});

useEffect(() => {
  if (!output?.value || output?.value !== "other") {
    unregister(`zones.${index}.data.${itemIndex}.additional`)
  }

  // Cleanup function to be executed when the component is unmounted
  return () => {
    unregister(`zones.${index}.data.${itemIndex}.additional`);
  };
}, [index, itemIndex, output, unregister]);

return (
  <div className='w-full flex flex-col gap-3'>
    {(output?.value === "other") && (
      <Fragment>
        <input
          placeholder='Input zone or add the new one'
          className='w-full rounded-lg px-4 py-3 border focus:outline-none'
          {...register(`zones.${index}.data.${itemIndex}.additional`, {
            required: {
              value: true,
              message: "Please input your zone or the new one"
            }
          })}
        />
        {errors.zones?.[index]?.data?.[itemIndex]?.additional &&
          <div className='mb-2 text-red-500 text-xs'>{errors.zones?.[index]?.data?.[itemIndex]?.additional?.message as any}</div>
        }
      </Fragment>
    )}
  </div>
);

};`

anyone know to handle this infinite loop on useEffect lifecycle, please ?