React Navigation Bottom Tabs - icons start at top of screen and animate to bottom

Question

I am seeing odd behavior on the bottom tabs. When I navigate back to the screen that shows the bottom tab navigation, the icons/text are positioned at the top of the screen and animate to the bottom. This happens very quickly, and I can't figure out the cause.

The expected behavior is that the icons are in the proper bottom position initially, instead of showing this weird animation.

Screen Recording link below shows 2 times where the back navigation causes this issue. It happens very quickly, so it's hard to see, but you will notice a flashing of sorts and if you look really closely you will notice the bottom tabs are animating from the top position.

Screen Recording Link

I am using the latest versions of react navigation: "@react-navigation/bottom-tabs": "^6.5.14", "@react-navigation/native": "^6.1.12", "@react-navigation/stack": "^6.3.23",

Navigator:

const BottomNavigation = () => {
    return (
        <BottomTab.Navigator
            tabBar={props => <BottomMenu {...props} />}
            screenOptions={{headerShown:false}}
        >
            <BottomTab.Screen name="Forecast" component={ForecastScreen} />
            <BottomTab.Screen name="Account" component={AccountScreen} />
            <BottomTab.Screen name="ForecastDetail" component={ForecastDetailScreen} />
            <BottomTab.Screen name="Contact" component={ContactScreen} />
            <BottomTab.Screen name="FAQ" component={FAQScreen} />
            <BottomTab.Screen name="Terms" component={TermsScreen} />
            <BottomTab.Screen name="Privacy" component={PrivacyScreen} />
            <BottomTab.Screen name="Delete" component={DeleteAccountScreen} />
            <BottomTab.Screen name="TideCalendar">
                {(props) => <TideCalendar {...props} />}
            </BottomTab.Screen>
        </BottomTab.Navigator>
    )
}

export default AppNavigation = () => {
    return (
        <MainStack.Navigator screenOptions={{headerShown:false}}>
            <MainStack.Screen name="Splash" component={SplashScreen} />
            <MainStack.Screen name="Main" component={BottomNavigation} />
        </MainStack.Navigator>
    )
}

Bottom Menu:

        <View
            style={{
                ...styles.container,
                display: allowNavItems.includes(state.routeNames[state.index]) ? 'flex' : 'none'
            }}
        >
{state.routes.filter(route => allowNavItems.includes(route.name)).map((route, index) => {
return (
...
                    <View
                        style={styles.menuItem}
                        key={route.key}
                    >
                        <TouchableOpacity
                            accessibilityRole="button"
                            accessibilityState={isFocused ? { selected: true } : {}}
                            accessibilityLabel={options.tabBarAccessibilityLabel}
                            testID={options.tabBarTestID}
                            onPress={onPress}
                            onLongPress={onLongPress}
                            style={styles.menuItemBtn}
                        >
                            {displayTabIcon(isFocused)}
                            <Text
                                style={isFocused ? styles.bottomTabSLabel : styles.bottomTabLabel}
                            >
                                {label}
                            </Text>
                        </TouchableOpacity>
                    </View>
                )
            })}
        </View>

Of note, I see this only on iOS release mode. I don't see this issue on the development release or on Android.