useFieldArray（React-hook-form）を使ったときのisInvalid（react-bootstrap）への記述

Question

前提・実現したいこと

React-hook-formとreact-bootstarpを使ってフロントエンドのプログラムを書いています。

同じ項目を増やしたり削除したりするためにuseFieldArrayを使っています。

useFieldArrayを使わない場合のisInvalidの指定は問題なく動きました。(氏名の項目)
ですが、useFieldArrayを使った場合への指定がうまく行かずメッセージが表示できません。（特技の項目）

発生している問題・エラーメッセージ

errors.users.0.tokugi.message
と表示されメッセージが表示されません。

該当のソースコード

import React from 'react';
import { useForm, useFieldArray, Controller } from 'react-hook-form';
import { Form, InputGroup, Row, Button, Col } from 'react-bootstrap';

import 'bootstrap/dist/css/bootstrap.min.css';

 const App = ({onSubmit}) => {
  const { register, handleSubmit, formState: { errors },control,reset, trigger, setError } = useForm({
    mode: 'onSubmit',
    defaultValue: {}
  });
  const { fields, append, remove } = useFieldArray({
    control,
    name: "users"
  });

  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      <Row className="mb-3">
        <Form.Group as={Col}>

          <Form.Label>氏名</Form.Label>
          <Form.Control isInvalid={errors.fullName} id="fullName" type="text" 
              {...register("fullName", {required: "必須項目", maxLength:{value: 20,message:"オーバー"}})} />
          {errors.fullName && <Form.Control.Feedback type="invalid"> { errors.fullName.message} </Form.Control.Feedback>}

        </Form.Group>
      </Row>
      <Row className="mb-3">
        {fields.map((item, index) => (
          <Form.Group key={item.id}>

            <Form.Label>特技</Form.Label>
            <Form.Control isInvalid={`errors.users.${index}.tokugi`}  control={control} type="text" 
                {...register(`users.${index}.tokugi`, {required: "必須項目", maxLength:{value: 20,message:"オーバー"}})} />
            {`errors.users.${index}.tokugi` && <Form.Control.Feedback type="invalid"> { `errors.users.${index}.tokugi.message`} </Form.Control.Feedback>}

            <button type="button" onClick={() => remove(index)}>Delete</button>
          </Form.Group>
        ))}
      <button
        type="button"
        onClick={() => append({  })}>
        append
      </button>

      </Row>
      <Form.Group>
        <Button type="submit">送信</Button>
      </Form.Group>
    </Form>
  );
}

export default App;

補足情報（FW/ツールのバージョンなど）

"@hookform/error-message": "^2.0.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"bootstrap": "5.1.1",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0-rc.0",
"react-dom": "^17.0.2",
"react-hook-form": "^7.17.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"