The `MultipleSelector` component does not update its UI when its value changes programmatically.

[Matrix02]

Hello there, so while trying to build a dual-purpose form, for update and create, and after trying to pass the already existent data to the MultipleSelector component, using react hook form (setValue()) I noticed that the component ui is not getting updated accordingly.

below is a more detailed explanation.

Steps to Reproduce:

1. Render the MultipleSelector component in a parent component.
2. Set the value of the MultipleSelector programmatically using state or props.
3. Observe that the UI of the MultipleSelector component does not update accordingly.

Expected Behavior:

I expected the MultipleSelector component to update its UI to reflect the new value when it is changed programmatically.

Actual Behavior:

The UI of the MultipleSelector component does not update when the value changes programmatically. It remains unchanged even though the value has been updated in the component's state.

Environment:

• React version: 18.2.0
• React hook form : ^7.50.1

• Code Snippets:

  
  // Example code where the value of MultipleSelector is updated programmatically
  // Set selectedSectors state with useState
  const [selectedSectors, setSelectedSectors] = useState([]);

// Update selectedSectors programmatically useEffect(() => { setSelectedSectors([{ label: 'Sector A', value: 'sector-a-id' }]); }, []);

// Render MultipleSelector with selectedSectors as value <MultipleSelector value={selectedSectors} onChange={handleChange} options={options} />

[hsuanyi-chou]

It did.

Here is a working example with react-hook-form