I was using react-navigation/native-stack to react-navigation/stack but now I'm having an issue where my navigation to new pages doesn't work anymore, when I select a new page, the navigation fails and I get this error: Couldn't find a LinkingContext context. My code is given below. What are my solutions here? When I select a new tab for example it works, but when I click on a new page it fails. I don't understand where the problem lies to start fixing it.

import {useDispatch, useSelector} from 'react-redux';
import type {TypedUseSelectorHook} from 'react-redux';
import {useNavigation} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import type {StackNavigationProp} from '@react-navigation/stack';

import type {RootState, AppDispatch} from '../store/store';
import {RootStackParamList} from '../types';

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
export const useAppNavigation: () => StackNavigationProp<RootStackParamList> =
  useNavigation;

// export const navigationRef: any = React.createRef();
// export const navigation = useAppNavigation();

const getActiveRouteName = (state: any): any => {
  const route = state.routes[state.index];
  if (route.state) {
    return getActiveRouteName(route.state);
  }
  return route.name;
};

export const Stack = createStackNavigator<RootStackParamList>();

Here is how I navigate to a new page (This is my Profile page where I use navigation.navigate to go to a new Page

const Profile = () => {
    const dispatch = useAppDispatch();
    const navigation = useAppNavigation();
    const user = useAppSelector((state) => state.appState.user);
    const userHasRoleAdmin = hasRoleAdmin(user);

    const { i18n, t } = useTranslation();
    const [showLanguageModal, setShowLanguageModal] = useState(false);

    const renderBannerMessage = () => {
        if (user && !user.isVerified) {
            return (
                <TouchableOpacity
                    activeOpacity={0.8}
                    style={styles.banner}
                    onPress={() => navigation.navigate('VerifyOTP', { autoSend: true })}
                >
                    <text.T14 style={styles.bannerText}>
                        {t('profile.verifyEmailBanner')}
                    </text.T14>
                </TouchableOpacity>
            );
        }
        return null;
    };

    const renderTitle = () => {
        return (
            <View style={styles.titleContainer}>
                <Text style={styles.titleText}>{t('profile.title')}</Text>
                <TouchableOpacity
                    onPress={() => setShowLanguageModal(true)}
                    style={styles.languageButton}
                >
                    <Feather name="globe" size={24} color={theme.colors.mainColor} />
                    <Text style={styles.languageText}>
                        {i18n.language.toLowerCase()}
                    </Text>
                </TouchableOpacity>
                <ChangeLanguageModal
                    visible={showLanguageModal}
                    onClose={() => setShowLanguageModal(false)}
                />
            </View>
        );
    };

    const signOutUser = async () => {
        await signOut(auth);
        dispatch(setLoggedInUser(null));
        dispatch(setRefreshToken(null));
        dispatch(setAccessToken(null));
        await persistor.purge();
        dispatch(backendApiSlice.util.resetApiState());
    };

    const onPressUserProfile = () => {
        if (user) {
            navigation.navigate('EditProfile');
        } else {
            navigation.navigate('SignIn');
        }
    };

    const renderUser = () => {
        return (
            <TouchableOpacity
                style={styles.userContainer}
                onPress={onPressUserProfile}
            >
                <Feather
                    name={user ? 'user' : 'log-in'}
                    size={24}
                    color={theme.colors.mainColor}
                />
                <text.T16 style={styles.userName} numberOfLines={1}>
                    {user ? user.name : t('profile.signIn')}
                </text.T16>
            </TouchableOpacity>
        );
    };

    const renderProfileItems = () => {
        if (!user) {
            return null;
        }
        return (
            <View>
                {!userHasRoleAdmin && (
                    <components.ProfileItem
                        icon="file-text"
                        title={t('profile.myOrders')}
                        onPress={() => {
                            navigation.navigate('OrderHistory', { home: false });
                        }}
                    />
                )}
                {!userHasRoleAdmin && (
                    <components.ProfileItem
                        icon="message-circle"
                        title={t("profile.customerSupport")}
                        onPress={() => {
                            navigation.navigate('CustomerSupport');
                        }}
                    />
                )}
                {!userHasRoleAdmin && (
                    <components.ProfileItem
                        icon="help-circle"
                        title={t("profile.faqs")}
                        onPress={() => {
                            navigation.navigate('FAQ');
                        }}
                    />
                )}
                {!userHasRoleAdmin && (
                    <components.ProfileItem
                        icon="clipboard"
                        title={t("profile.helpUsImprove")}
                        onPress={() => {
                            navigation.navigate('Suggestions');
                        }}
                    />
                )}
                <components.ProfileItem
                    icon="log-out"
                    title={t('profile.signOut')}
                    onPress={() => signOutUser()}
                    danger={true}
                />
            </View>
        );
    };

    const renderContent = () => {
        return (
            <ScrollView
                contentContainerStyle={styles.contentContainer}
            >
                {renderBannerMessage()}
                {renderUser()}
                {renderProfileItems()}
            </ScrollView>
        );
    };

    return (
        <ScreenWrapper hideHeader>
            {renderTitle()}
            {renderContent()}
        </ScreenWrapper>
    );
};

const styles = StyleSheet.create({
    banner: {
        backgroundColor: theme.colors.error,
        marginHorizontal: 14,
        padding: 12,
        marginTop: 4,
        marginBottom: 8,
        borderRadius: 24,
    },
    bannerText: {
        color: theme.colors.white,
        fontSize: 14,
        textAlign: 'center',
    },
    titleContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%',
        paddingHorizontal: 20,
        paddingTop: 12,
    },
    titleText: {
        color: theme.colors.textColor,
        fontSize: 22,
        fontWeight: '500',
    },
    languageButton: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 12,
        paddingVertical: 4,
    },
    languageText: {
        marginLeft: 8,
        color: theme.colors.textColor,
        fontSize: 16,
    },
    userContainer: {
        paddingHorizontal: 20,
        paddingVertical: 14,
        marginBottom: 10,
        flexDirection: 'row',
        alignItems: 'center',
    },
    userName: {
        marginRight: 'auto',
        color: theme.colors.textColor,
        marginLeft: 12,
        fontSize: 16,
    },
    contentContainer: {
        flexGrow: 1,
        paddingVertical: 10,
        marginHorizontal: 8,
        flex: 1,
    },
});

export default Profile;