React native - Why is it looping till the end?

I just started learning React Native and I got this problem which I don't understand why is happening. Can somebody help me?

const [data, setData] = useState([])
const [itemModal, setItemModal] = useState(false)

const fetchingData = async () =>{
    var lista = [];
    var currentItem;
    const res = await fetch('http://mockapi.ddns.net/APIHandler.php');
    const things = await res.json();
    for(let i = 1; i <= 20; i++) {
        currentItem = things[i];
        lista.push(currentItem)
    }
    setData(lista)
}
useEffect(() => { 
    fetchingData();
  },[]);
<ScrollView>{data.map((item)=>{

        const {id, cijenaUKN, naslov, dostupneVelicine} = item;

        var urlNaslov = naslov.replace(/\//g, "").replace(/\’/g, "")

        return (
            <View key={id} style={{backgroundColor:"grey", borderWidth:2, borderColor:"black"}}>
                <TouchableOpacity onPress={()=>setItemModal(true)}>
                    {itemModal ? <Modal><Text>{id}</Text></Modal> : null}
                <Image source={{uri: `http://mockapi.ddns.net/YEE/${urlNaslov}/1.png`}} style={{backgroundColor:"aliceblue", width:100, height:100}}/>
                <Text>{id}</Text>
                <Text>{naslov}</Text>
                <Text>{cijenaUKN}</Text>
                <Text>{dostupneVelicine}</Text>
                </TouchableOpacity>
            </View>
        )
    })}
    </ScrollView>

I am looping through the product array and when I click wanted product Modal with that item should pop-up. But every time I try, the Modal pops up and it shows the id of last element in the array. I don't know why is that happening. I tried to assign it to variable(it didn't work);