Android Jetpack Compose BottomNavigationBar With Compose Navigation

dependencies {
  implementation 'androidx.navigation:navigation-compose:2.4.0-alpha10'
}

import android.os.Bundleimport androidx.activity.ComponentActivityimport androidx.activity.compose.setContentimport androidx.compose.foundation.layout.Boximport androidx.compose.foundation.layout.paddingimport androidx.compose.material.*import androidx.compose.runtime.Composableimport androidx.compose.runtime.getValueimport androidx.compose.ui.Modifierimport androidx.navigation.NavDestination.Companion.hierarchyimport androidx.navigation.NavGraph.Companion.findStartDestinationimport androidx.navigation.compose.NavHostimport androidx.navigation.compose.composableimport androidx.navigation.compose.currentBackStackEntryAsStateimport androidx.navigation.compose.rememberNavControllerimport com.luasoftware.journey.ui.theme.JourneyThemeclass MainActivity : ComponentActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContent {            JourneyApp()        }    }}

sealed class Screen(val route: String, val label: String, val icon: ImageVector) {    object Home : Screen("home", "Home", Icons.Filled.Home)    object Collections : Screen("collection", "Collections", Icons.Filled.List)    object UserProfile : Screen("user_profile", "Profile", Icons.Filled.AccountCircle)}@Composablefun HomeScreen() {    Text(text = "Home")}@Composablefun CollectionsScreen() {    Text(text = "Collections")}@Composablefun UserProfileScreen() {    Text(text = "Profile")}

@Composablefun JourneyApp() {    JourneyTheme {        val navController = rememberNavController()        val screens = listOf(            Screen.Home,            Screen.Collections,            Screen.UserProfile        )        // https://developer.android.com/jetpack/compose/navigation        Scaffold(            bottomBar = {                BottomNavigation {                    val navBackStackEntry by navController.currentBackStackEntryAsState()                    val currentDestination = navBackStackEntry?.destination                    screens.forEach { screen ->                        BottomNavigationItem(                            icon = { Icon(imageVector = screen.icon, contentDescription = screen.label) },                            label = { Text(screen.label) },                            selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true,                            onClick = {                                navController.navigate(screen.route) {                                    // Pop up to the start destination of the graph to                                    // avoid building up a large stack of destinations                                    // on the back stack as users select items                                    popUpTo(navController.graph.findStartDestination().id) {                                        saveState = true                                    }                                    // Avoid multiple copies of the same destination when                                    // reselecting the same item                                    launchSingleTop = true                                    // Restore state when reselecting a previously selected item                                    restoreState = true                                }                            }                        )                    }                }            }        ) { innerPadding ->            Box(modifier = Modifier.padding(innerPadding)) {                // nav graph                NavHost(navController = navController, startDestination = Screen.Home.route) {                    composable(Screen.Home.route) { HomeScreen() }                    composable(Screen.Collections.route) { CollectionsScreen() }                    composable(Screen.UserProfile.route) { UserProfileScreen() }                }            }        }    }}