Material-UIで配列を複数のTextFieldに分割して処理する

1<Paper className={props.styles.choices} variant="outlined">
2  {[0, 1, 2].map((i) => (
3    <FormItem key={i}>
4      <fieldset name="japaneseChoices" className={props.styles.fieldSet}>
5        <Controller
6          as={TextField}
7          id={`japaneseChoices${i}`}
8          name={`japaneseChoices.${i}`}
9          label={`${I18n.t('attributes.word.japaneseChoices')} ${i + 1}`}
10          fullWidth
11          control={props.control}
12          defaultValue={props.word.japaneseChoices && props.word.japaneseChoices[i]}
13          onChange={console.log}
14        />
15      </fieldset>
16    </FormItem>
17  ))}
18</Paper>

• React Hook Form - Array Fields - CodeSandbox