React Native: клики по дочерним компонентам внутри компонента ScrollView вызывают событие onPress последнего элемента

Вот что я пытаюсь сделать:

1. Получить массив и для каждого из элементов массива поместить их в дочерний компонент в ScrollView.

2. При щелчке по этому дочернему элементу вернуть значение этого дочернего компонента.

Вот в чем проблема: всякий раз, когда я нажимаю на один из дочерних элементов, он возвращает содержимое последнего дочернего элемента. Реквизиты передаются каждому дочернему элементу без каких-либо проблем — я не знаю, что пошло не так.

Может ли кто-нибудь посоветовать мне, в чем проблема и как ее исправить? Ниже приведен упрощенный код:

    const data = [ 0,1,2,3,4 ]

    //When clicked, the result will always show 4, regardless of which button was clicked

    const ResultLine = (props) => {
        return (
            <TouchableOpacity style={{height:40}} onPress={()=>{console.log(props.data)}}>
                <Text>{props.data}</Text>
            </TouchableOpacity>
        ) 
    }

    const ResultList = () => {
        return (
            <ScrollView style={{width:'100%',height:'100%'}}>
                {data.map((dt,index)=>
                    <ResultLine data={dt} key={index}/>
                )}
            </ScrollView>
        )
    }

Спасибо!