How to change tabBarColor in Material Bottom Tabs Navigator -- React Native?

Question

I am using Material Bottom Tabs Navigator to create navigation bar in my react-native application.

When I switch between tabs, I want to add ripple effect. I have followed all the procedure mentioned in documentation, GitHub issues, StackOverflow and even ChatGPT. None of the procedure worked.

Code

import { StatusBar } from "expo-status-bar";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useTheme } from "react-native-paper";
import React from 'react'

import Home from "../Screens/Home";
import Profile from "../Screens/Profile";
import Notification from "../Screens/Notification";

const Tab = createMaterialBottomTabNavigator();

const MyTabs = () => {
    const theme = useTheme()
    theme.colors.secondaryContainer = 'transparent' // remove pill around the active tab-icon
    return (
        <Tab.Navigator
            shifting={true}
            barStyle={{
                backgroundColor: "#2A81AA",
            }}
            activeColor="#ffffff"
            inactiveColor="#16445A"
            initialRouteName="Home"
        >
            <Tab.Screen
                name="Home"
                component={Home}
                options={{
                    title: "Home",
                    tabBarLabel: "Home",
                    tabBarColor: "#13BB9F",
                    tabBarBadge: true,
                    tabBarIcon: ({ color }) => (
                        <MaterialCommunityIcons name="home" color={color} size={26} />
                    )}
                }
            />
            <Tab.Screen
                name="Notification"
                component={Notification}
                options={{
                    title: "Updates",
                    tabBarLabel: "Updates",
                    tabBarColor: "#0E3E5A",
                    tabBarIcon: ({ color }) => (
                        <MaterialCommunityIcons name="bell" color={color} size={26} />
                    )}
                }
            />
            <Tab.Screen
                name="Profile"
                component={Profile}
                options={{
                    title: "Profile",
                    tabBarLabel: "Profile",
                    tabBarColor: "#4C064E",
                    tabBarIcon: ({ color }) => (
                        <MaterialCommunityIcons name="account" color={color} size={26} />
                    )}
                }
            />
        </Tab.Navigator>
    );
};

export function BottomTabNavigation() {
    return (
        <NavigationContainer>
            <MyTabs />
            <StatusBar style="auto" />
        </NavigationContainer>
    );
}

In this code, I have followed every bit of instruction I have found but couldn't get what I wanted.

When I press certain tab, tabBarColor should be changed to it's corresponding tabBarColor mentioned in options of Tab.Screen but the color remained as it is mention in Tab.Navigator -> barStyle

I am using Expo on android device.

What could be the problem here?