I have some list and based on that list, I want to render a component which should have

elevation: 1

property. But as shown below, its value seems to be increasing as going through the next item in the iteration.

Code:

const data = [1,2,3,4,5,6,7,8]

    return (
        <View style={{
            flex: 1,
            justifyContent:'center',
            alignItems: 'center',
            backgroundColor: '#fafafa',
            marginTop: 50
        }}>
            {
                data.map(item =>
                    <View style={{
                        backgroundColor: '#fff',
                        borderRadius: 20,
                        width: '80%',
                        height: 50,
                        marginTop: 10,
                        elevation: 1,
                    }} />
                )
            }
        </View>
    )