React-hook-form + React-i18n = translation not working

Question

I hope you are all good, I have an object {valueA: "a", valueB: "b", ... } with a lot of fields and rather than writing all setter, you know:

const [valueX, setValueX] = useState(data.valueX?data.valueX:"")

I have been looking for some lazy solution so I find react-hook-form so, here is my code

<form onSubmit={handleSubmit(onSubmit)}>
 <Grid container spacing={2}>
  {Object.keys(data).map((key) => (
    <Grid item xs={10} sm={6} md={3} lg={2} key={key}>
      <TextField
       label={t(`docsInfo.${key}`)}
       name={key}
       defaultValue={data[key]}
       variante="outlined"
       {...register(key)}
      />
     </Grid>
    ))}
   </Grid>
   <Grid mt={2}>
    <Button
     variant="contained"
     endIcon={<UpgradeIcon />}
     type="submit"
    >
     Update
    </Button>
  </Grid>
</form>

the code works fine it generates all the fields and the label with the first language (en) but when I click on the second one (jp) nothing happens (T_T)

I've checked my code to be sure my issue isn't something I am missing but could find anything wrong.

the translation module is in a context in my app refer to this

do you have any idea how I can solve my issue?

thanks...

Answer 1

are you sure that you have created the variables for the translation?