How to change button color when pagerview index changed

 <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?