How remove Login bottom tab navigator but still make it the first screen when I open the app?

I am using react native navigation. My idea is to put the login screen first and from there navigate to the "Wine Catalogue" route after login (I am using google authentication and all that works) via "navigation.navigate("UserInfo", { email, name, photoUrl })," that is the code in the login screen and it works fine but I don't want Login screen to have a bottom tab navigation (Like Wine Catalogue and user info), just the screen and when a user logs in it should transfer/navigate him to the "Wine Catalogue" screen. Can someone please tell me what am I missing?

Also how would I display the email, name, photoUrl that are forwarded from the login screen to UserInfo?

navigator.js:

import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { LoginScreen } from "../screens/LoginScreen";
import { WineCatalogue } from "../screens/WineCatalogue";
import { UserInfoSceen } from "../screens/UserInfoScreen";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Ionicons from "@expo/vector-icons/Ionicons";

const Stack = createStackNavigator();

export function MyStack() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="WineCatalogue" component={WineCatalogue} />
        <Stack.Screen name="UserInfo" component={UserInfoSceen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const Tab = createBottomTabNavigator();

export function TabNavigator() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;
            if (route.name === "WineCatalogue") {
              iconName = focused ? "wine" : "wine-outline";
            } else if (route.name === "UserInfo") {
              iconName = focused ? "person" : "person-outline";
            }

            return <Ionicons name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: "darkred",
          tabBarInactiveTintColor: "gray",
        })}
      >
        <Tab.Screen
          name="Login"
          component={LoginScreen}
          options={{
            headerTitle: "Login",
            headerTitleStyle: {
              fontWeight: "bold",
              fontSize: 25,
              paddingBottom: 5,
              color: "white",
            },
            headerStyle: {
              backgroundColor: "darkred",
              shadowColor: "transparent",
              height: 120,
            },
            title: "LOGIN",
            tabBarStyle: {
              paddingTop: 5,
            },
          }}
        />
        <Tab.Screen
          name="WineCatalogue"
          component={WineCatalogue}
          options={{
            headerTitle: "Wine Catalogue",
            headerTitleStyle: {
              fontWeight: "bold",
              fontSize: 25,
              paddingBottom: 5,
              color: "white",
            },
            headerStyle: {
              backgroundColor: "darkred",
              shadowColor: "transparent",
              height: 120,
            },
            title: "WINE CATALOGUE",
            tabBarStyle: {
              paddingTop: 5,
            },
          }}
        />
        <Tab.Screen
          name="UserInfo"
          component={UserInfoSceen}
          options={{
            headerTitle: "USER INFO",
            headerTitleStyle: {
              fontWeight: "bold",
              fontSize: 25,
              paddingBottom: 5,
              color: "white",
            },
            headerStyle: {
              backgroundColor: "darkred",
              shadowColor: "transparent",
              height: 120,
            },
            title: "USER INFO",
            tabBarStyle: {
              paddingTop: 5,
            },
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

LoginScreen.js

import React from "react";
import { View, Button, StyleSheet } from "react-native";
import * as Google from "expo-google-app-auth";

export function LoginScreen({ navigation }) {
  const handleGoogleSignIn = () => {
    const config = {
      iosClientId:
        "608924630924-37cv4o1pg812fa42a04ev4h7ppe6iii4.apps.googleusercontent.com",
      androidClientId:
        "608924630924-2al2brd2if6m7qj1vm4v5jbmcqab472b.apps.googleusercontent.com",
      expoClientId:
        "608924630924-f0jeg4heeid44ksa84fsqcimc90asl1v.apps.googleusercontent.com",
      scopes: ["profile", "email"],
    };

    Google.logInAsync(config)
      .then((result) => {
        const { type, user } = result;
        if (type == "success") {
          const { email, name, photoUrl } = user;
          console.log("Signin successfull");
          setTimeout(
            () => navigation.navigate("UserInfo", { email, name, photoUrl }),
            1000
          );
        } else {
          console.log("Siging not successfull");
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <View style={styles.screen}>
      <View style={styles.buttonContainer}>
        <Button
          title="Google SignIn"
          onPress={handleGoogleSignIn}
          style={styles.button}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  buttonContainer: {
    backgroundColor: "#1ecbe1",
  },
  button: {
    color: "black",
    width: 200,
    height: 200,
  },
});