When I make the nested navigation the startDestination then it works otherwise I can’t go to the nested navigation. How can I navigate to the nested navigation?

Jetpack Compose Nested Navigation

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.material.Button
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.unit.dp
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.navigation
import androidx.navigation.compose.navigate
import androidx.navigation.compose.rememberNavController
import io.github.zoha131.navigation.ui.NavigationTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NavigationTheme {
                val navController = rememberNavController()
                NavHost(navController = navController, startDestination = Route.Splash) {
                    composable(Route.Splash) {
                        Screen(
                                title = Route.Splash,
                                // This creates a fatal error. I can't navigate to nested graph
                                onNavigation = { navController.navigate(Route.Auth) }
                        )
                    }
                    navigation(startDestination = Route.NestedAuth.Social, route = Route.Auth){
                        composable(Route.NestedAuth.Social) {
                            Screen(
                                    title = Route.NestedAuth.Social,
                                    onNavigation = { navController.navigate(Route.NestedAuth.EmailSignup) }
                            )
                        }

                        composable(Route.NestedAuth.EmailSignup) {
                            Screen(
                                    title = Route.NestedAuth.EmailSignup,
                                    onNavigation = { navController.navigate(Route.Main) }
                            )
                        }
                    }
                    composable(Route.Main) {
                        Screen(
                                title = Route.Main,
                                onNavigation = { navController.navigate(Route.Splash) }
                        )
                    }
                }
            }
        }
    }
}

object Route {
    const val Splash = "Splash"
    const val Main = "Main"
    const val Auth = "Auth"
    object NestedAuth {
        const val Social = "Social"
        const val EmailSignup = "EmailSignup"
    }
}

@Composable
fun Screen(title: String, onNavigation: () -> Unit) {
    Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
    ) {
        Text(text = title)
        Spacer(modifier = Modifier.size(24.dp))
        Button(onClick = onNavigation) {
            Text(text = "Next Page")
        }
    }
}

Do you get solution for this. I am also facing the same issue