Feat: Use react-hook-form to synchronize the data of the categorize form to the agent node. #3221 (#5665)

### What problem does this PR solve?

Feat: Use react-hook-form to synchronize the data of the categorize form
to the agent node. #3221

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/form-sheet/next.tsx

@@ -65,12 +65,15 @@ const FormSheet = ({
 
   const { t } = useTranslate('flow');
 
-  const { handleValuesChange } = useHandleFormValuesChange(node?.id);
+  const { handleValuesChange } = useHandleFormValuesChange(
+    operatorName,
+    node?.id,
+    form,
+  );
 
   useEffect(() => {
-    if (visible) {
+    if (visible && !form.formState.isDirty) {
       if (node?.id !== previousId.current) {
-        // form.resetFields();
         form.reset();
         form.clearErrors();
       }