How to scroll specific childe view inside Scrollview outside of button click

Question

I have one scrollview and inside that lots of elements are there like Proudct blokc , color block, size block etc.. I have one Add to cart button at bottom of screen sticky manner and one wishlist icon at top of header so when I click on that Wishlist or Add to cart button user should automatically scroll to Color and size section so any idea how can i solve this ? Refer my code below

 <SafeAreaView style={styles.safeAreView}>
  <ScrollView
    bounces={false}
    showsVerticalScrollIndicator={false}
    ref={scrollRef}
    style={styles.container}>
    <View style={commonStyles.fullflex}>
      {productDetailData &&
        productDetailData?.data?.pdpBanners.length > 0 && (
          <Carousel
            useNativeDrive={true}
            autoplay={false}
            loop
            index={0}
            bottomIndicator={20}
            pageSize={ScreenWidth}>
            {productDetailData?.data?.pdpBanners.map(
              (image: IPDPImageGallery, index: number) =>
                _renderItem(image, index),
            )}
          </Carousel>
        )}
      {renderProductBlock()}
      {renderColorBlock()}
      {renderSizeBlock()}

      <View style={styles.horizontalGap} />
    </View>
  </ScrollView>
  {renderAddToBagView()}
</SafeAreaView>

const renderColorBlock = () => {
return (
  <View style={styles.colorBlockView}>
    <View style={styles.colorBlockTopView}>
      <Text style={styles.colorTitleView}>{strings.availableColor}</Text>
      <View style={styles.colorTotalView}>
        <Text style={styles.colorTotalTextView}>
          {productDetailData?.colorData.length} {strings.items}
        </Text>
      </View>
    </View>
    <FlatList
      data={colorData}
      renderItem={({item, index}) => renderColorComponent(item, index)}
      keyExtractor={item => item.color_code.toString()}
      horizontal={true}
      showsHorizontalScrollIndicator={false}
    />
  </View>
   );
};
const renderSizeBlock = () => {
 return (
  <View style={styles.colorBlockView}>
    <View style={styles.colorBlockTopView}>
      <Text style={styles.colorTitleView}>{strings.availableSize}</Text>
      <View style={styles.sizeView}>
        <Text style={styles.sizeTextView}>{strings.sizeguide}</Text>
        <ImageView
          source={images.SizeGuide}
          resizeMode="contain"
          style={styles.guideImageStyle}
        />
      </View>
    </View>
    <FlatList
      data={sizeData}
      renderItem={({item, index}) => renderSizeComponent(item, index)}
      keyExtractor={item => item.size_code.toString()}
      horizontal={true}
      showsHorizontalScrollIndicator={false}
    />
  </View>
 );
};

As you can see my above code I have carousal view then product detail content then after color view and size view and I also take ref of Scroolview also but if i put code static like below it will not generalize becuase content may be differ in every product so any idea how can I make generlize for that ?

scrollRef.current.scrollTo({
  x: 0,
  y: 2000,
  animated: true,
});