Hiding tab bar on screens inside a nested stack navigator

Question

I want to hide the tab bar on certain screens inside a nested stack navigator. I have a bottom tab bar, using a CUSTOM tab bar, set up like so:

const MainAppBottomTabs = createBottomTabNavigator<BottomTabParamList>();
const MainAppBottomTabsNavigator = (): JSX.Element => {
    return (
        <MainAppBottomTabs.Navigator
            initialRouteName="ListScreen"
            screenOptions={{
                headerShown: false
            }}
            tabBar={(props: BottomTabBarProps) => (
                <TabBar
                    state={props.state}
                    navigation={props.navigation}
                    descriptors={props.descriptors}
                    insets={props.insets}
                /> // this is my custom tab bar
            )}>
            <MainAppBottomTabs.Screen
                name="ListScreen"
                component={ListScreen}
            />
            <MainAppBottomTabs.Screen
                name="ProductsScreen"
                component={ProductsScreen}
            />
            <MainAppBottomTabs.Screen
                name="DetailsStackNavigator"
                component={DetailsStackNavigator}
            />
        </MainAppBottomTabs.Navigator>
    );
};

Here's the nested DetailsStackNavigator:

const DetailsStack = createNativeStackNavigator();
const DetailsStackNavigator = (): JSX.Element => {
    return (
        <DetailsStack.Navigator
            initialRouteName="UsersScreen"
            screenOptions={{
                headerShown: false
            }}>
            <DetailsStack.Screen
                name="UsersScreen"
                component={UsersScreen}
                options={{ animation: 'none' }}
            />
            <DetailsStack.Screen
                name="OptionsScreen"
                component={OptionsScreen}
                options={{ animation: 'none' }}
            />
            <DetailsStack.Screen name="OptionsDetailsScreen" component={OptionsDetailsScreen} />
            <DetailsStack.Screen name="UsersDetailsScreen" component={UsersDetailsScreen} />
        </DetailsStack.Navigator>
    );
};

I want to hide the tab bar on the OptionsDetailsScreen and UsersDetailsScreen inside of the DetailsStackNavigator. I have tried the following which DOES hide the tab bar, but it cuts off the screens at the bottom where the tab bar would be:

const MainAppBottomTabs = createBottomTabNavigator<BottomTabParamList>();
const MainAppBottomTabsNavigator = (): JSX.Element => {
    const getTabBarVisibility = (route) => {
        const routeName = getFocusedRouteNameFromRoute(route);
        const hideOnScreens = ['OptionsDetailsScreen', 'UsersDetailsScreen'];
        return hideOnScreens.indexOf(routeName) <= -1 ? 'flex' : 'none';
    };
    return (
        <MainAppBottomTabs.Navigator
            // rest of code from above
            <MainAppBottomTabs.Screen
                name="DetailsStackNavigator"
                component={DetailsStackNavigator}
                options={({ route }) => ({
                    tabBarStyle: { display: getTabBarVisibility(route) }
                })}
            />
        </MainAppBottomTabs.Navigator>
    );
};

and then in my custom tab bar:

const TabBar = (screenProps: ScreenProps): JSX.Element => {
    const focusedOptions = screenProps.descriptors[screenProps.state.routes[screenProps.state.index].key].options;

    if (focusedOptions?.tabBarStyle?.display === 'none') {
        return null;
    }
    return <View>{RenderTabs(screenProps)}</View>;
};

Not sure what else to try. Seems to be way too difficult for what I would assume would be a pretty common scenario.