Error: Element type is invalid: expected a string (for built-in components) but got: undefined. The ERROR is located at NativeStackViewInner

Question

I get this error when I use StackNavigation in a react-native component. This works just fine:

const AppStack = () => {
  return (
     <Tab.Navigator
       screenOptions={{activeTintColor: '#FF0000', inactiveTintColor: 'black'}}
       tabBar={props => <BottomTabBar {...props} />}
       initialRouteName={'Home'}>
       <Tab.Screen
         name="Home"
         component={HomeScreen}
         options={{headerShown: false}}
       />
       <Tab.Screen
         name="Add"
         component={AddScreen}
         options={{headerShown: false}}
       />
       <Tab.Screen
         name="Recipe"
         component={RecipeScreen}
         options={{headerShown: false}}
       />
       <Tab.Screen
         name="Workout"
         component={WorkoutScreen}
         options={{headerShown: false}}
       />
       <Tab.Screen
         name="Settings"
         component={SettingsScreen}
         options={{headerShown: false}}
       />
     </Tab.Navigator>
  );
};

export default AppStack;

but when I combine this tab navigator with some other components and make a stack navigator out of these:

const AppStack = () => {
  return (
    <Stack.Navigator initialRouteName="tabs">
      <Stack.Screen
        options={{headerShown: false}}
        name="tabs"
        component={TabNavigator}
      />
      <Stack.Screen
        name="RecipeDetails"
        component={RecipeDetails}
        options={({route}) => ({title: route.params.name})}
      />
    </Stack.Navigator>
 );
};

export default AppStack;

TabNavigator component :

const TabNavigator = () => (
  <Tab.Navigator
    screenOptions={{activeTintColor: '#FF0000', inactiveTintColor: 'black'}}
    tabBar={props => <BottomTabBar {...props} />}
    initialRouteName={'Home'}>
    <Tab.Screen
      name="Home"
      component={HomeScreen}
      options={{headerShown: false}}
    />
    <Tab.Screen
      name="Add"
      component={AddScreen}
      options={{headerShown: false}}
    />
    <Tab.Screen
      name="Recipe"
      component={RecipeScreen}
      options={{headerShown: false}}
    />
    <Tab.Screen
      name="Workout"
      component={WorkoutScreen}
      options={{headerShown: false}}
    />
    <Tab.Screen
      name="Settings"
      component={SettingsScreen}
      options={{headerShown: false}}
    />
  </Tab.Navigator>
);

I get the error: ERROR Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

here are my imports:

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import HomeScreen from '../Screens/HomeScreen';
import SettingsScreen from '../Screens/SettingsScreen';
import {StyleSheet} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
import {
  ApplicationProvider,
  Button,
  IconRegistry,
  Layout,
  Text,
  BottomNavigation,
  BottomNavigationTab,
} from '@ui-kitten/components';
import {EvaIconsPack} from '@ui-kitten/eva-icons';
import * as eva from '@eva-design/eva';
import AddScreen from '../Screens/AddScreen';
import RecipeScreen from '../Screens/RecipeScreen';
import WorkoutScreen from '../Screens/WorkoutScreen';
import RecipeDetails from '../components/RecipeDetails';