React Navigation how to hide tabbar inside stack navigation - react-native

Question

I'm new to react native, I couldn't do what I wanted to do.
The situation is
When I click the button in the SettingsScreen, I Hide the Bottom Tab, but
The thing I can't understand is,
Is my path and course wrong?
Tab Bottom Height changes, thank you in advance for your help.
import * as React from 'react';
import { getFocusedRouteNameFromRoute } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import SettingScreen from '../screen/SettingScreen';
import SettingDetails from '../screen/SettingDetails';
const Stack = createStackNavigator();
const tabHiddenRoutes = ['SettingDetails'];
function SettingStack({ navigation, route }) {
React.useLayoutEffect(() => {
if (tabHiddenRoutes.includes(getFocusedRouteNameFromRoute(route))) {
navigation.setOptions({ tabBarStyle: { display: 'none' } });
} else {
navigation.setOptions({ tabBarStyle: { display: 'flex' } });
}
}, [navigation, route]);
return (
<Stack.Navigator
initialRouteName="Setting"
screenOptions={{
headerBackTitleVisible: false,
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#5D3EBD',
},
headerTitleStyle: {
color: '#fff',
},
headerBackTitleStyle: {
color: '#fff',
},
headerTintColor: '#fff',
}}>
<Stack.Screen
name="Setting"
component={SettingScreen}
options={{ title: 'Setting Page' }}
/>
<Stack.Screen
name="SettingDetails"
component={SettingDetails}
options={{ title: 'Setting Details' }}
/>
</Stack.Navigator>
);
}
export default SettingStack;
Snack