我想呈现一个带有按钮的产品列表，当用户单击按钮时，该按钮将产品添加到购物篮中，该按钮替换为一个计数器，让用户选择该产品的数量。
屏幕截图：

问题是当用户向下滚动时并且当平面列表呈现新项目时，绿色按钮在改变计数器之前冻结一秒钟。
平面列表代码：

<FlatList
            data={products}
            renderItem={renderPrices}
            numColumns={1}
            keyExtractor={(item, index) => index.toString()}
            refreshControl={
              <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
            }
            ListFooterComponent={() =>
              loading ? (
                <View style={styles.spinnerContainer}>
                  <Spinner size="giant" />
                </View>
              ) : !productStore.moreItems ? (
                <View style={{ justifyContent: 'center', alignItems: 'center', paddingVertical: 20, backgroundColor: Colors.secondary500, marginHorizontal: 3 }}>
                  {IconComponent(evaIcons.done, Colors.black900, { width: 30, height: 30 })}
                  <Text>سلات قائمة ديل منتجات</Text>
                </View>
              ) : null
            }
            nestedScrollEnabled={true}
            onEndReached={() => getProductList()}
            onEndReachedThreshold={0.5}
          />

平面列表呈现的产品组件：

return (
    <Layout style={styles.container}>
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Image
          source={{
            uri: image
          }}
          resizeMode="contain"
          style={{ width: 100, height: 70 }}
        />
        <View style={styles.priceContainer}>
          <Text style={styles.priceText}>{price.price}</Text>
          <Text style={styles.currencyText}>دم</Text>
        </View>
        <PriceType
          quantityType={
            price.sellUnit === SellUnitEnum.ATOMIC
              ? price.atomicRtlName
              : price.packingRtlName
          }
        />
      </View>
      <View style={{ flex: 3 }}>
        <View
          style={{
            flex: 1,
            flexDirection: "row-reverse",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <Text
            style={{
              width: "75%",
              textAlign: "right",
              fontFamily: "almarai-bold",
              marginRight: 3,
            }}
          >
            {price.rtlName}
          </Text>
          {/* <AwalPoint points={price.points} /> */}
          <AwalPoint points={price.points} backgroundColor={Colors.gray200} textColor={Colors.gray800} />
        </View>
        <View style={{ flex: 1, flexDirection: "row-reverse" }}>
          <PackageQuantity
            title={price.atomicRtlName.toString() + " في"}
            packageName={price.packingRtlName}
            quantity={price.packageQuantity.toString()}
            image={require("../assets/surprise.png")}
            backgroundColor={Colors.primary400}
            containerStyle={{ flex: 1 }}
          />
          <PackageQuantity
            title="تمن"
            packageName={
              price.sellUnit === "ATOMIC"
                ? price.packingRtlName
                : price.atomicRtlName
            }
            quantity={
              (price.sellUnit === "ATOMIC"
                ? (price.price * price.packageQuantity).toFixed(2)
                : (price.price / price.packageQuantity).toFixed(2)
              ).toString() + " دم"
            }
            image={require("../assets/dollar.png")}
            backgroundColor={Colors.secondary400}
            containerStyle={{ flex: 1.5 }}
          />
        </View>
        <View style={{ flex: 1, flexDirection: "row", paddingBottom: 7 }}>
          {basketItem === undefined && !isFocused ? (
            <Button
              style={{
                height: 45,
                borderWidth: 0,
                borderRadius: 100,
                backgroundColor: Colors.secondary500,
              }}
              onPress={() => {
                console.log("button clicked: ");
                useDispatch(updateItems({ item: price, quantity: 1, error: undefined, productImage: image }));
              }}
              accessoryRight={IconComponent(evaIcons.cart, Colors.white500)}
            >
              {(props) => (
                <Text
                  {...props}
                  style={{
                    fontFamily: "almarai-bold",
                    fontSize: 15,
                    color: Colors.white500,
                  }}
                >
                  أضف إلى السلة
                </Text>
              )}
            </Button>
          ) : (
            <CounterInput
              style={{ flex: 1 }}
              priceId={price.id}
              isFocused={isFocused}
              setIsFocused={setIsFocused}
              maxValue={price.storeQuantity}
              buttonStyle={{ backgroundColor: Colors.primary500, borderWidth: 0 }}
            />
          )}
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-end' }}>
            {(price.isDiscountable === true) ?
              <View style={{ flexDirection: 'row-reverse', justifyContent: 'center', alignItems: 'center' }}>
                <Image
                  source={require("../assets/promo.png")}
                  resizeMode="contain"
                  style={{ width: 30, height: 30 }}
                />
                <Text style={{ textAlign: 'center', fontFamily: 'almarai-regular' }}>فيه روميز</Text>
              </View> : null}
          </View>
        </View>
      </View>
    </Layout>
  );