javascript - fieldArray 要素を更新できません

Question

React.js と Formik ライブラリを使用して動的フォームを作成しようとしています。問題は、最初の配列要素を除いてサービス配列を更新できないことです。

私のフォームモデルは次のようになります:

{
    name: ''
    services: [{ name: '', comment: '' }],
}

私のフォームには、2 つのフィールド (名前とコメント) を持つサービスの配列が必要です。サービス名は、特定のリストからラジオ ボタンとして生成されます。コードは次のとおりです。

<FieldArray
        name="services"
        render={arrayHelpers => (
          <div>
            {values.services.map((serviceX, index) => (
              <div key={index}>
                {serviceList.map((service, serviceIndex) => (
                  <div className="col col--md-4" key={serviceIndex}>
                    <div className="radio--container">
                      <input
                        name={`services.${index}.name`}
                        type="radio"
                        id={service.label}
                        value={
                          services
                            ? services.find(
                                service => service.value === values.services[index].name
                              )
                            : ''
                        }
                        checked={service.value === values.services[index].name}
                        onChange={() =>
                          setFieldValue(
                            `services.${index}.name`,
                            service.value
                          )
                        }
                        onBlur={handleBlur}
                      />
                      <label htmlFor={service.label}>{service.label}</label>

                      <div className="check">
                        <div className="inside" />
                      </div>
                    </div>
                  </div>
                ))}

                <Field name={`services.${index}.comment`} />
                <button
                  type="button"
                  onClick={() => arrayHelpers.remove(index)}
                >
                  -
                </button>
              </div>
            ))}
            <button
              type="button"
              onClick={() => arrayHelpers.push({ name: '', comment: '' })}
            >
              +
            </button>
          </div>
        )}
      />

また、サービス リスト (ラジオ ボタン) を生成するための別のステートレス コンポーネントを作成しようとしましたが、同じ結果が得られました。ただし、別のステートレス コンポーネントを使用すると、インデックス値 (props から受け取る) がコンポーネントと比較して DOM で異なることに気付きました。