Dropdown: Not correctly refreshed when using dynamic fields

[Makistos]

Describe the bug

When creating dropdown components dynamically and then removing some, the values shown in the dropdown are incorrectly shown. They are not updated so even though the values in memory are correct they show the value that was in the location of the removed dropdown.

Reproducer

https://codesandbox.io/s/dropdown-fix-forked-om0ets?file=/src/Form.jsx

PrimeReact version

8.6.1

React version

18.x

Language

ALL

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome 106

Steps to reproduce the behavior

1. Click the add button next to the second dropdown field.
2. Click remove next to the second dropdown field.
3. Notice that second dropdown field still shows "Heinlein" rather than "Clarke" even though the debug print below shows it should be "Clarke".

Expected behavior

Second dropdown should show the value "Clarke".

[melloware]

To me this looks like a React Hook Form issue as manipulating the list without useState is never telling the DropDown to re-render itself which is the "React" way of doing it. I would ask on the React Hook Form forums or GitHub how to do what you want to do.

[Makistos]

I have, response was to make sure key is properly set for each control which they should.

PR says they support RHF but requires the use of controlled controls. So as I understand it this should work like this.

[melloware]

I just fixed your sandbox. You were using the wrong key

https://codesandbox.io/s/dropdown-fix-forked-e9np1v?file=/src/Form.jsx