React Native Java Script Converted Into Type Script But Tab Navigation Showing Error Below

Thanx in advance ! i Converted Project into Type Script But When Tabbar comes i m facing this issue :

------Errror-----

VirtualizedList: missing keys for items, make sure to specify a key or id property on each item or provide a custom keyExtractor.

Warning: React.jsx: 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.

import React from "react";import { NavigationContainer } from "@react-navigation/native";import { createNativeStackNavigator } from "@react-navigation/native-stack";import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";import { TabBar } from "../../components";import Home from "../../screens/home";import Profile from "../../screens/profile";import Favorites from "../../screens/favorites";const Tabs = createBottomTabNavigator(); // Bottom Tab Navigator export function HomeStack() { return (<Tabs.Navigator  initialRouteName="Home"  screenOptions={{ headerShown: false }}  tabBar={(props) => <TabBar {...props} />}  backBehavior="history"><Tabs.Screen name="Home" component={Home} /><Tabs.Screen name="Favorites" component={Favorites} /><Tabs.Screen name="Profile" component={Profile} /></Tabs.Navigator> );}

Here is my Screen Navigation Code

<Stack.Group><Stack.Screen name="Login" component={Login} /><Stack.Screen name="ChangePassword" component={ChangePassword} /><Stack.Screen name="App" component={HomeStack} /></Stack.Group>

Here is my App.tsx

 import React, { useEffect } from "react"; import { ThemeProvider } from "./src/stores/theme"; import Navigation from "./src/components/navigation"; import { LoaderProvider } from "./src/stores/loader"; export default function App() { return (<ThemeProvider><LoaderProvider><Navigation /></LoaderProvider></ThemeProvider>