带有 React-hook-form useFieldArray 的 ReactQuill

问：

尝试将 ReactQuill Editor 和 React-Hook-Form 与动态内容一起使用时碰壁。

我是允许用户编辑 HTML 内容的基本组件，并且我有内容可用于每种语言的选项卡。这适用于正常的文本字段输入

所以这很完美

const { fields, append } = useFieldArray({
      control,
      name: 'templatebodies',
      keyName: 'id',
   });

return (
   <RHFTextField
      multiline
      maxRows={10}
      name={`templatebodies.${index}.textContent`}
   />
);

但是当我尝试使用 Quill 编辑器时，它不会接受构建组件所需的字符串插值

const { fields, append } = useFieldArray({
      control,
      name: 'templatebodies',
      keyName: 'id',
   });

return (
   <RHFEditor simple name={`templatebodies.${index}.textContent`} />
);

export default function RHFEditor({ name, helperText, ...other }: Props) {
   const {
      control,
      watch,
      setValue,
      formState: { isSubmitSuccessful },
   } = useFormContext();

   const values = watch();

  
   return (
      <Controller
         name={name}
         control={control}
         render={({ field, fieldState: { error } }) => (
            <Editor
               id={name}
               value={field.value}
               onChange={field.onChange}
               error={!!error}
               helperText={
                  (!!error || helperText) && (
                     <FormHelperText error={!!error} sx={{ px: 2 }}>
                        {error ? error?.message : helperText}
                     </FormHelperText>
                  )
               }
               {...other}
            />
         )}
      />
   );
}

我想我已经达到了我的理解极限，或者我只是很厚：-）

任何帮助都会很棒 - 隧道里需要光！

谢谢