DefaultValue on an AutoComplete in combination with AsyncItems does not seem to work

[MarkBracke]

Describe the bug

I have a component that is using an AutoComplete in combination with AsyncItems, DefaultValue and Multiple Select.

To Reproduce

Steps to reproduce the behavior:

1. Create a component with at least one DefaultValue and AsyncItems.
2. Notice that the DefaultValue is not filled in.
3. When trying to find items and clicking them, we get an error in the console (Uncaught TypeError: Cannot read properties of undefined (reading 'value')) and the item is not selected.

Expected behavior

I expect the component to work properly...?

Note

For some reason, when using React.StrictMode, in development the issue doesn't show up... So we had to find out in production. Good times...

Tracking

I believe I have tracked down the issue to the following:

1. The DefaulValue(s) are "searched" (https://github.com/digipolisantwerp/antwerp-ui_react/blob/master/packages/autocomplete/src/models/AsyncSearchMode.js#L13)
2. setState is then called with the found values (https://github.com/digipolisantwerp/antwerp-ui_react/blob/master/packages/autocomplete/src/models/AsyncSearchMode.js#L26)
3. handleDefaultValues is then called on the selection mode (https://github.com/digipolisantwerp/antwerp-ui_react/blob/master/packages/autocomplete/src/models/AsyncSearchMode.js#L29)
4. component.state is then used to populate the array, BUT, this will be the initial state as React does not immediately update the state when calling setState... (https://github.com/digipolisantwerp/antwerp-ui_react/blob/master/packages/autocomplete/src/models/MultipleSelectionMode.js#L19)
5. The state will be populated with an array containing undefined values (as find in step 4 won't actually find anything...) (https://github.com/digipolisantwerp/antwerp-ui_react/blob/master/packages/autocomplete/src/models/MultipleSelectionMode.js#L25C1-L27C8)

Source: https://react.dev/reference/react/Component#setstate