Problem with picker with search with react-native-dropdown-picker

Question

I am trying to make a picker with search, showing results that I get from a database. To do this I use react-native-dropdown-picker . Well, I manage to use the component, and I'm trying to create a cycle to show the options, but I'm not able. I tried like this but it gives me the error: undefined is not an object (evaluating'iter[Symbol.iterator]').

I have checked the database and it brings the data correctly (In a normal picker they are displayed well). How do I have to do it? Thank you.

The code that fetches the results from the database:

const [dataSourceclientes, setDataSourceclientes] = useState([]);
            useEffect(() => {
            fetch('https://exampleweb.es/api/data_clientes.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                Authorization: `Bearer ${auth.token}`,
            },
            body: JSON.stringify({
                token: auth.token,
            }),
            })
            .then(response => response.json())
            .then(responseJson => {
                setDataSourceclientes(responseJson);
            })
            .catch(error => {
                console.error(error);
            });
          }, []);

and here the Picker that I try to do:

        <DropDownPicker
                open={open}
                searchable={true}
                value={value}
                selectedValue={clienteSeleccion}
                onValueChange={(text) => { formik.setFieldValue("cliente", text); setSelectmodelos(text); setclienteSeleccionado(text); } }
                items={dataSourceclientes.map((item, key)=>(
                    
                      label=item.nombre,
                      value=item.id,
                      key=key
                    )
                  )}
                setOpen={setOpen}
                setValue={setValue}
                setItems={setItems}
                mode="BADGE"
                badgeDotColors={["#e76f51", "#00b4d8", "#e9c46a", "#e76f51", "#8ac926", "#00b4d8", "#e9c46a"]}
         />

EDIT

I have already solved it by mounting an array and sending it to the component. If it happens to someone else I have done it like this:

          useEffect(() => {

            fetch('https://exampleweb.es/api/data_clientes.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                Authorization: `Bearer ${auth.token}`,
            },
            body: JSON.stringify({
                token: auth.token,
            }),
            })
            .then(response => response.json())
            .then(responseJson => {
                setDataSourceclientes(responseJson);
                for (let i = 0; i < responseJson.length; i++) {
                        clientesar.push({"label": responseJson[i].nombre, "value":responseJson[i].id});
                    }
                setDataSourceclientes(clientesar);
            })

            .catch(error => {
                console.error(error);
            });
          }, []);
        <DropDownPicker
                open={open}
                searchable={true}
                
                selectedValue={clienteSeleccion}
                onValueChange={(text) => { formik.setFieldValue("cliente", text); setSelectmodelos(text); setclienteSeleccionado(text); } }
                items={dataSourceclientes}
                setOpen={setOpen}
                setValue={clienteSeleccion}
                setItems={setItems}
                mode="BADGE"
                badgeDotColors={["#e76f51", "#00b4d8", "#e9c46a", "#e76f51", "#8ac926", "#00b4d8", "#e9c46a"]}
         />