How to change button color when pagerview index changed - react-native

Question

<PagerView
style={styles.viewPager}
initialPage={0}
ref={ref}
orientation="horizontal"
offscreenPageLimit={2}
onPageSelected={index => {
setData({
...data,
viewPosition:index.nativeEvent.position
})
}}>
<View key="1">
<Goods/>
</View>
<View key="2">
<Goods/>
</View>
</PagerView>
<View style={styles.bottomView}>
<TouchableOpacity
style={data.viewPosition == 0 ? styles.btnNormal : styles.btnPress}
onPress={() => ref.current.setPage(0)}>
<Text
style={{
alignSelf: 'center',
color: data.viewPosition == 0 ? '#c38063' : '#aaa',
fontSize: 12,
fontWeight: 'bold',
letterSpacing: 1,
}}>
Goods
</Text>
</TouchableOpacity>
<TouchableOpacity
style={data.viewPosition == 0 ? styles.btnPress : styles.btnNormal}
onPress={() => ref.current.setPage(1)}>
<Text
style={{
alignSelf: 'center',
color: data.viewPosition == 0 ? '#aaa' : '#c38063',
fontSize: 12,
fontWeight: 'bold',
letterSpacing: 1,
}}>
Service
</Text>
</TouchableOpacity>
</View>
I am implementing pagerview in my React application and also I have two buttons at the bottom of the page. When user clicks the button I want to change pagerview, also I want to change the button style.
The above code is working with my expectation but the issue is it's taking some amount of time to change button color when pagerview is changed.
How can I fix the delay of changing button colors?