How to make activeTIntColor and activebackgroundColor of drawerItem work in react navigation 6?

I was not able to change the activeTintColor and activeBackgroundColor of drawerItem in react-navigation 6, Eventhough I'm using those props on drawer item I can't see any changes in activeItem tintColor change in selected Item.Below here is the code that I'm using where I used the prop activeTintColor to set the active DrawerItem tint color but I don't see any changes in color and even I can't see which is active tab I'm on but navigation works fine.I am able to navigate to DrawerItem screens only thing it active Item which is selected doesn't seems applying activeTintColor etc

function DrawerNavigation() {
return (
    <NavigationContainer>
        <Drawer.Navigator
            screenOptions={{
                headerShown: false
            }}
            drawerContent={(nav) => {
                const { navigation } = nav;
                let state = navigation.getState();
                return (
                    <View style={{ flex: 1 }}>
                        <View style={{ alignItems: "center" }}>
                            <View
                                style={{
                                    height: 100,
                                    width: 100,
                                    borderColor: "black",
                                    borderWidth: 1,
                                    borderRadius: 50,
                                    marginVertical: 10,
                                    overflow: "hidden"
                                }}
                            >
                                <Image
                                    source={{
                                        uri: "https://m.cricbuzz.com/a/img/v1/192x192/i1/c170661/virat-kohli.jpg"
                                    }}
                                    resizeMode="cover"
                                    style={{ width: "100%", height: "100%" }}
                                />
                            </View>
                        </View>
                        <View style={{ flex: 1 }}>
                            <DrawerItem
                                label="Home"
                                pressColor="red"
                                icon={() => (
                                    <Image
                                        source={require("../assets/home.png")}
                                        style={{ height: 25, width: 25 }}
                                    />
                                )}
                                onPress={() => navigation.navigate("Home")}
                                activeTintColor="red"
                            />
                            <DrawerItem
                                label="Profile"
                                pressColor="red"
                                icon={() => (
                                    <Image
                                        source={require("../assets/profile.png")}
                                        style={{ height: 25, width: 25 }}
                                    />
                                )}
                                onPress={() => navigation.navigate("Profile")}
                                activeTintColor="red"
                            />
                            <DrawerItem
                                label="Cart"
                                pressColor="red"
                                icon={() => (
                                    <Image
                                        source={require("../assets/cart.png")}
                                        style={{ height: 25, width: 25 }}
                                    />
                                )}
                                onPress={() => navigation.navigate("Cart")}
                                activeTintColor="red"
                            />
                        </View>
                    </View>
                );
            }}
        >
            <Drawer.Screen name="HomeStack" component={StackNavigation} />
        </Drawer.Navigator>
    </NavigationContainer>
);

}

i was facing a similar issue cause i be working with react-navigator 6.x but read the 5.x doc. To set the activeTintColor to all my screens i finnaly do it like that:

<NavigationContainer>
  <Drawer.Navigator
    screenOptions={{
      drawerStyle: {
        backgroundColor: "grey",
        width: "100%",
      },
      drawerActiveTintColor: "white",
      drawerInactiveTintColor: "yellow",
    }}
  >
    <Drawer.Screen
      name="One"
      component={OneStackScreen}
      options={{
        title: "One",
        drawerIcon: () => (
          <MaterialIcons name="home" size={24} color="white" />
        ),
      }}
    />
    <Drawer.Screen
      name="Two"
      component={TwoStackScreen}
      options={{
        title: "Ma page",
      }}
    />
  </Drawer.Navigator>
</NavigationContainer>