Show BottomNavigation once the user is logged

I want to use BottomNavigation to navigation between screens actually its working fine with BottomNavigation.SceneMap({...})

but the BottomNavigation its being showing in every screens, i only want to show once the user is logged. after click on login button

import React from 'react'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import userReducer from './src/reducers/user'
import { NavigationContainer } from '@react-navigation/native'
import { BottomNavigation, Text } from 'react-native-paper'
import { createStackNavigator } from '@react-navigation/stack'
import { theme } from './src/core/theme'
import {
  StartScreen,
  Dashboard,
  GroupScreen,
  InviteScreen,
  CreateGroup,
} from './src/screens'

const Stack = createStackNavigator()
const store = createStore(userReducer)
export default function App() {
  const [index, setIndex] = React.useState(0)
  const [routes] = React.useState([
    { key: 'music', title: 'Music', icon: 'queue-music' },
    { key: 'albums', title: 'Albums', icon: 'album' },
  ])

  const one = () => (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="StartScreen"
      >
        <Stack.Screen name="StartScreen" component={StartScreen} />
        <Stack.Screen name="Dashboard" component={Dashboard} /> 
      </Stack.Navigator>
    </NavigationContainer>
  )

  const two = () => (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="InviteScreen" component={InviteScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )

  const renderScene = BottomNavigation.SceneMap({
    music: one,
    albums: two,
  })

  return (
    <Provider store={store} theme={theme}>
      <BottomNavigation
        navigationState=
        onIndexChange={setIndex}
        renderScene={renderScene}
      />
    </Provider>
  )
}

EDIT by answers:

i did this when i pressed the button login i need to redirect to dashboard but dashboard is in mytabs

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Dashboard" component={Dashboard} />
      
    </Tab.Navigator>
  )
}

does not render nothing, i just to copy any example from here https://reactnavigation.org/docs/bottom-tab-navigator/ any of those render in my local, i am using EXPO

for example this

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style=>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style=>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

the wrong is display:none

from Show BottomNavigation once the user is logged