React Native Drawer Navigation Custom Content with focused

CustomSideBarContent.tsx

import { DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';
import React from 'react';
import { Image, Text, TouchableOpacity, View, Platform } from 'react-native';
import SideBarItem from './SideBarItem';
import Colors from 'tailwindcss/colors';
import { ArrowLeftOnRectangleIcon, ChatBubbleBottomCenterTextIcon } from 'react-native-heroicons/outline';
import classNames from 'classnames';

const CustomSideBarContent = (props: any) => {
    const focused = props.state.index;
    return (
        <DrawerContentScrollView
            {...props}>
            <TouchableOpacity
                className={classNames({
                    'flex flex-row gap-4 px-4 mb-10 justify-items-center': true,
                    'pt-4': Platform.OS === 'android'
                })}
                onPress={() => props.navigation.navigate('Profilim')}
            >
                <Image source={{ uri: 'https://ipmgis.com/images/users/ecefa734-6a02-47dc-ae56-67102a8627ca.jpg' }}
                    style={{
                        width: 40,
                        height: 40,
                        borderRadius: 9999,
                        marginRight: 10
                    }}
                />
                <View>
                    <Text className='text-sm font-semibold text-gray-900'>
                        Umut Yerebakmaz
                    </Text>
                    <Text className='text-xs font-semibold text-indigo-500'>
                        Admin / Yazılım Ekibi
                    </Text>
                </View>
            </TouchableOpacity>
            
            {/* custom */}
            <View className='px-2.5'>
                <SideBarItem
                    focused={focused}
                    index={0}
                    label='Taleplerim'
                    badge='12'
                    icon={ChatBubbleBottomCenterTextIcon}
                    color={Colors.indigo[600]}
                    onPress={() => props.navigation.navigate('Taleplerim')}
                />
                <SideBarItem
                    focused={focused}
                    index={1}
                    label='Aktivitelerim'
                    badge='12'
                    icon={ChatBubbleBottomCenterTextIcon}
                    color={Colors.indigo[600]}
                    onPress={() => props.navigation.navigate('Aktivitelerim')}
                />
                <SideBarItem
                    focused={focused}
                    index={9999}
                    label='Logout'
                    icon={ArrowLeftOnRectangleIcon}
                    color={Colors.indigo[600]}
                    onPress={() => console.log('logout')}
                />
            </View>
        </DrawerContentScrollView>

    );
};

export default CustomSideBarContent;

DrawerNavigator.tsx

import React from 'react';
import UserRequestsScreen from '../screens/UserRequests';
import { createDrawerNavigator } from '@react-navigation/drawer';
import UserActivitiesScreen from '../screens/UserActivities';
import CustomSideBarContent from '../components/sidebar/CustomSideBarContent';
import { ChatBubbleBottomCenterTextIcon, CursorArrowRippleIcon } from "react-native-heroicons/outline";


const Drawer = createDrawerNavigator();

const DrawerNavigator = ({ navigation }: any) => {
    return (
        <Drawer.Navigator
            initialRouteName='Taleplerim'
            drawerContent={(props) => <CustomSideBarContent {...props} />} >
            <Drawer.Screen
                name="Taleplerim"
                component={UserRequestsScreen}
                options={{
                    drawerLabel: 'Taleplerim',
                    drawerIcon: ({ color }) => (
                        <ChatBubbleBottomCenterTextIcon color={color} />
                    )
                }}
            />
            <Drawer.Screen

                name="Aktivitelerim"
                component={UserActivitiesScreen}
                options={{
                    drawerLabel: 'Aktivitelerim',
                    drawerIcon: ({ color }) => (
                        <CursorArrowRippleIcon color={color} />
                    ),
                }}
            />
      </Drawer.Navigator>
    );
};

export default DrawerNavigator;

SideBarItem.tsx

import { TouchableOpacity, Text, View } from "react-native";
import Icon from "./Icon";
import classNames from "classnames";

const SideBarItem = ({ label, onPress, icon, color, badge, focused, index }: any) => {
    return (
        <TouchableOpacity
            className={classNames({
                'flex p-2 text-sm font-semibold leading-6 text-gray-700 rounded-md group': true,
                'bg-gray-100': index === focused
            })}
            onPress={onPress}
        >
            <View className='flex flex-row items-center'>
                <View className='flex flex-row items-center gap-6'>
                    <Icon icon={icon} color={color} />
                    <Text className='font-semibold leading-6 text-gray-700'>{label}</Text>
                </View>
                {badge > 0 && <View className='ml-auto rounded-full bg-white px-2.5 py-0.5 border border-gray-200'>
                    <Text className='text-xs font-medium text-center text-gray-600'>{badge}</Text>
                </View>}
            </View>
        </TouchableOpacity>
    );
};

export default SideBarItem;