How to make a part of ListHeaderComponent stay on top React Native Expo FlashList

Question

I have a React Native FlashList with a ListHeaderComponent with 2 components.

The structure is:

header Component filter component

then

list items

This means that as the list scrolls up, header component should disappear (non-sticky) whereas filter component should stay at the top of the list (sticky).

like this:

Explaining Gif

This is the code:

   <Container>
      <View style={{ height: "100%" }}>
        <FlashList
          ref={flatListRef}
          data={promo}
          ListHeaderComponent={
            <View style={{ flex: 1 }}>
              <Header HeaderType="LOGO" ContentText="" />
              <View>
                <SlideFilterList
                  setIsSelect={setIsSelect}
                  isSelect={isSelect}
                  />
              </View>
            </View>
          }
          keyExtractor={(item) => item.id.toString()}
          renderItem={({ item }) => (
            <View style={{ width: "100%", alignItems: "center" }}>
              <ProductCard product={item} />
            </View>
          )}
    ...

btw "stickyHeaderIndices={[0]}" it doesn't work because the first render item is glued to the top and not the filter component

help pls

Im using Flashlist, a react native lib it has the same use as a conventional flatlist but with more performance