'DropDownPicker multiple. Error for assign array of objects in state

Technologies: ReactNative with TypeScript

I am using DropDownPicker with multiple selection properties. But when I assign the property to my state variable, it only saves the last selected item. If I comment the setState, I can see the entire array of objects and all selected elements.

The config for DropDownPicker:

    <DropDownPicker
          open = {openFaulTypesOptions}
          multiple = {true}
          value = {infracciones}
          items = {foulTypesItems}
          loading = {isLoadingFoulTypes}
          setOpen = {setOpenFaulTypesOptions}
          setValue = { console.log }
          onSelectItem = {(items) => {
              onChange(items, 'infracciones');
          }}
          autoScroll = {false}
          listMode = "MODAL"
          mode = "BADGE"
          showBadgeDot = {true}
          searchable = {true}
          searchPlaceholder = "Search..."
          placeholder = "Select"
          itemSeparator = {true}
/>

The function for changue the state is in a generic hook. I can use it for others fields. This hook is right when the field is boolean, simple select selector or text field. But when is array objects the setState doesn't work for me.

The Hook:

import { useState } from 'react';

export const useForm = <T extends Object>( initState: T ) => {

    const [state, setState] = useState( initState );

    const onChange = ( value: string | boolean | any[], field: keyof T ) => {
       setState({
           ...state,
           [field]: value
       });
    }

    return {
        ...state,
        onChange,
    }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source