Estoy usando formularios de gancho de reacción para recopilar contenido localizado, cuando configuro el campo valores predeterminados en el método useForm, es posible que no tenga todos los valores predeterminados establecidos. Por ejemplo, podría verse así:

 { en: { first_text: "English first text", second_text: "English second text" } }

Nota: Agregar los valores vacíos predeterminados para cada campo como una cadena vacía para cada configuración regional no es realmente una opción aquí.

He creado un entorno limitado de código simplificado aquí: https://codesandbox.io/s/react-hook-form-with-multi-locale-pnx11?file=/src/Child.tsx que muestra los 2 campos mencionados anteriormente y un selector de idioma

Cuando cambio el idioma haciendo clic en el botón, el problema que encuentro es que mis campos de entrada (y formData) se actualizan con los datos anteriores que estaban presentes en el campo en lugar de mostrar un campo de entrada vacío.

asi que:

 { en: { first_text: "English first text", second_text: "English second text" } }

se convierte en:

 { en: { first_text: "English first text", second_text: "English second text" }, fr: { first_text: "English first text", // instead of "" second_text: "English second text" // instead of "" } }

Por lo que entiendo, los valores del formulario se actualizan cuando los componentes del controlador se vuelven a renderizar, pero no entiendo por qué y cómo puedo evitar esto. No pude encontrar una manera de asegurarme de que si llamo a getValues con una ruta que no conduce a ningún valor predeterminado, entonces represente una cadena vacía (u otro valor predeterminado).

Pocas cosas que he intentado son pasar una cadena vacía como el valor predeterminado de los componentes del controlador y también anular el registro de los campos, pero no tuve éxito allí.

¡Cualquier consejo/ayuda sería muy apreciado!