Props in Tab.Navigation react navigation not working - react-native

Question

I make a Navigation component and put all screen in it.
it working well, but props in Tab.Navigation not work such as barStyle,initialRouteName,....
I make stack for each screen and put all stack in bottom navigation and i wanna change option for bottom navigation but I cant.
I set initialRouteName and bar style but now working at all.
Thanks for response.
import {NavigationContainer} from '#react-navigation/native';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import CollectionScreen from '../screens/Collection';
import LiveScreen from '../screens/Live';
import PrayScreen from '../screens/Pray';
import ProfileScreen from '../screens/Profile';
import PublicationScreen from '../screens/Publication';
import React from 'react';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
const LiveStack = createNativeStackNavigator();
function LiveStackScreen() {
return (
<LiveStack.Navigator screenOptions={{headerShown: false}}>
<LiveStack.Screen name="LiveScreen" component={LiveScreen} />
</LiveStack.Navigator>
);
}
const ProfileStack = createNativeStackNavigator();
function ProfileStackScreen() {
return (
<ProfileStack.Navigator screenOptions={{headerShown: false}}>
<ProfileStack.Screen name="ProfileScreen" component={ProfileScreen} />
</ProfileStack.Navigator>
);
}
const PrayStack = createNativeStackNavigator();
function PrayStackScreen() {
return (
<PrayStack.Navigator screenOptions={{headerShown: false}}>
<PrayStack.Screen name="PrayScreen" component={PrayScreen} />
</PrayStack.Navigator>
);
}
const PublicationStack = createNativeStackNavigator();
function PublicationStackScreen() {
return (
<PublicationStack.Navigator screenOptions={{headerShown: false}}>
<PublicationStack.Screen
name="PublicationScreen"
component={PublicationScreen}
/>
</PublicationStack.Navigator>
);
}
const CollectionStack = createNativeStackNavigator();
function CollectionStackScreen() {
return (
<CollectionStack.Navigator screenOptions={{headerShown: false}}>
<CollectionStack.Screen
name="CollectionScreen"
component={CollectionScreen}
/>
</CollectionStack.Navigator>
);
}
const Tab = createBottomTabNavigator();
export default function Navigation() {
return (
<NavigationContainer>
<Tab.Navigator
// This props not working
initialRouteName="Profile"
barStyle={{backgroundColor: '#694fad'}}>
<Tab.Screen name="Live" component={LiveStackScreen} />
<Tab.Screen name="Profile" component={ProfileStackScreen} />
<Tab.Screen name="Pray" component={PrayStackScreen} />
<Tab.Screen name="Publication" component={PublicationStackScreen} />
<Tab.Screen name="Collection" component={CollectionStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}

Answer 1

I know why this snippets not working.
I wrote the code like below
initialRouteName="Profile"
But we must set initialRouteName like below
initialRouteName={'Profile'}
and for changing background color of bottomTab you should do like below
screenOptions={{
headerShown: false,
tabBarStyle: {backgroundColor: 'red'},
}}