FlatList onViewableItemsChanged keeps firing even if I’am on another tab

I have a few tabs (i.e. chat and profile), chat tab has only a FlatList which has a viewport check function, it works fine when I’ve rendered the chat tab. But if I switch to profile tab after rendering chat’s FlatList, the viewport function keeps firing because tabs doesn’t unmount when switching. How can I stop that function to execute when I switch tabs?

FlatList component

<FlatList
    viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
    ListFooterComponent={loading ? renderLoader : undefined}
    contentContainerStyle={{paddingTop: 20}}
    onEndReachedThreshold={0.5}
    renderItem={renderMessage}
    onEndReached={endReached}
    data={messagesList}
    style={styles.body}
    ref={flatlistRef}
    inverted
/>

Viewability config

// FlatList viewport check
const onViewableItemsChanged = React.useCallback((info: any) => {
    info.changed.forEach((item: any) => {
        if (item.isViewable && !item.item.read) {
            handleReadMessage(item.item.key, item.item.sender)
        } else return
    })
}, [])

const viewabilityConfig = {
   itemVisiblePercentThreshold: 75,
   minimumViewTime: 100,
   waitForInteraction: false,
}

const viewabilityConfigCallbackPairs = useRef<any>([{ viewabilityConfig, onViewableItemsChanged }])

What I’ve tried already:

1. useFocusEffect to change ‘isChatPage’ boolean state and adding if statement to viewport function (state doesn’t change inside that function)
2. adding useCallback with and without state inside a dependency array (doesn’t work either)
3. adding conditional rendering (if state = true render FlaList, else dont render - doesn’t work as well)