SectionList add additional style for SectionHeader when it becomes sticky

Question

I have a SectionList on react native with dynamic sections

sections = [{
  title: "1",
  data: [{},{}]
},
{
  title: "2",
  data: [{},{},{},{}]
}]

and the list is s being rendered as:

<SectionList
  sections={sections}
  renderItem={renderItem}
  renderSectionHeader={({section: {title}}) => <SectionTitle title={title} />
  stickySectionHeadersEnabled={true}
/>

So whenever I scroll down I want this section header sticks to the top until it is replaced by the next header,

My Problem is that I want to add additional styling to the header when it sticks for example when the header is not sticky its background color is white but when it sticks I want it to be red.

Is there any way to do this?, I've tried using the viewabilityConfig and onViewableItems but for some reason it's not working as expected here's what I did:

 const [stickyHeaders, setStickyHeaders] = useState<Record<string, boolean>>({});
 const onViewableItemsChanged = useCallback(({ viewableItems }: { viewableItems: ViewToken[] }) => {
    const newStickyHeaders: Record<string, boolean> = {};
    viewableItems.forEach(viewableItem => {
      if (viewableItem.section && viewableItem.isViewable) {
        newStickyHeaders[viewableItem.section.title] = true;
      }
    });
    setStickyHeaders(newStickyHeaders);
  }, []);

 const viewabilityConfig = {
   itemVisiblePercentThreshold: 100
 };