React Native Tab Navigator Debouncing - react-native

Question

I have a mobile app where i switch tabs from tab navigator
I want to add a debounce with useDebouncedCallback hook because I want to prevent user from clicking tabs constantly.
How can I add this to the navigator ? I tried with listeners prop (tabPress) and onPress on TabBarButton but doesn't work
// name={NAVIGATION.FRIENDS}
name="Friends"
component={Friends}
// listeners={{
// tabPress: e => {
// debouncedUpdate(() =>
// NavigationService.navigate(NAVIGATION.FRIENDS),
// );
// },
// }}
options={{
tabBarLabel: strings.tab.friend,
tabBarIcon: ({focused, color, size}) => (
<TabBarButton
routeName={strings.tab.friend}
focused={focused}
color={color}
onPress={debouncedUpdate(() =>
NavigationService.navigate(NAVIGATION.FRIENDS),
)}
/>
),
}}
/>
Below is the full Tab Navigator codes
import React from 'react';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import {TabBarButton} from '#/components/TabBarButton';
import Home from '#/screens/dashboard/home/Home';
import Friends from '#/screens/dashboard/friends/Friends';
import ChatThreads from '#/screens/dashboard/chat/chat_threads/ChatThreads';
import Profile from '#/screens/dashboard/profile/Profile';
import {
whiteColor,
primaryBgColor,
tabInactiveTintColor,
tabActiveTintColor,
} from '#/config/colors';
import {COMMON, NAVIGATION} from '#/constants';
import {strings} from '#/localization';
import {Host} from 'react-native-portalize';
import {useSelector} from 'react-redux';
import {useDebouncedCallback} from 'use-debounce';
const Tab = createBottomTabNavigator();
const TabNavigator = () => {
const newMessagesCount = useSelector(state => state.chat.newMessagesCount);
const debouncedUpdate = useDebouncedCallback(fn => {
fn();
}, 200);
return (
<>
<Host>
<Tab.Navigator
tabBarOptions={{
activeTintColor: tabActiveTintColor,
inactiveTintColor: tabInactiveTintColor,
showLabel: false,
style: {height: COMMON.BOTTOM_TAB_BAR_HEIGHT},
}}>
<Tab.Screen
name={NAVIGATION.HOME}
component={Home}
options={{
tabBarLabel: strings.tab.home,
tabBarIcon: ({focused, color, size}) => (
<TabBarButton
routeName={strings.tab.home}
focused={focused}
color={color}
/>
),
}}
/>
<Tab.Screen
name={NAVIGATION.FRIENDS}
component={Friends}
options={{
tabBarLabel: strings.tab.friend,
tabBarIcon: ({focused, color, size}) => (
<TabBarButton
routeName={strings.tab.friend}
focused={focused}
color={color}
/>
),
}}
/>
<Tab.Screen
name={NAVIGATION.CHAT_THREADS}
component={ChatThreads}
options={{
tabBarBadge:
newMessagesCount > 99 ? '99+' : String(newMessagesCount),
tabBarBadgeStyle: [
{
backgroundColor: primaryBgColor,
height: 20,
minWidth: 20,
borderRadius: 10,
color: whiteColor,
fontSize: 10,
left: 5,
opacity: newMessagesCount ? 1 : 0,
},
],
tabBarLabel: strings.tab.chat,
tabBarIcon: ({focused, color, size}) => (
<TabBarButton
routeName={strings.tab.chat}
focused={focused}
color={color}
/>
),
}}
/>
<Tab.Screen
name={NAVIGATION.PROFILE}
component={Profile}
options={{
tabBarLabel: strings.tab.profile,
tabBarIcon: ({focused, color, size}) => (
<TabBarButton
routeName={strings.tab.profile}
focused={focused}
color={color}
/>
),
}}
/>
</Tab.Navigator>
</Host>
</>
);
};
export default TabNavigator;