SetValue is not rerender the component

[Yaelahfelix]

I use setValue to add new data to an array in a form, but the new component is not showing. I guess it's because setValue is not triggering a re-render.

          <button
              type="button"
              className='btn btn-primary'
              onClick={async () => {
                const pertanyaanData = getValues(`pertanyaan.${index}`);

                setValue(`pertanyaan.${index}.pilihan_ganda.${pertanyaanData.pilihan_ganda.length}`, {
                  id: 0,
                  opsi: (pertanyaanData.pilihan_ganda.length + 1).toString(),
                  label: '',
                  pertanyaanId: pertanyaanData.id,
                });

              }}
            >
              Add Option
            </button>

[Moshyfawn]

Try append instead.

[Yaelahfelix]

oke append.. i was trying that method too, but i need {index} as of index array value..

The problem is, usefieldarray cant be called in onClick Function.. It is must call in the very top before the return jsx was called..

Maybe it is can to use usefieldarray, but the problem is how can i parse the index value in the usefieldarray but the usefieldarray its not in the onclick function