I'm learning to use navigation-compose, which is a login page feature.

But I encountered a problem in the process of using it, I hope you can help me.

There is a flickering when the page switches, which doesn't look right. For this reason, I added a 3000ms animation to make this easier to see.

this is my code:

@Serializable
object PageLogin

@Serializable
data class PageRegister(val isForgot: Boolean = false)

@Serializable
data class PageRegisterNext(val isForgot: Boolean = false)

class MyLoginActivity : ComponentActivity() {

    val viewModel = MyLoginViewModel()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        enableEdgeToEdge()

        setContent {
            UniScannerTheme {
                val navController = rememberNavController()

                    enterTransition = {
                        fadeIn(
                            animationSpec = tween(
                                3000, easing = LinearEasing
                            )
                        ) + slideIntoContainer(
                            animationSpec = tween(3000, easing = EaseIn),
                            towards = AnimatedContentTransitionScope.SlideDirection.Start
                        )
                    },
                ) {

                    composable() {
                        Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                            PageLogin(
                                navHostController = navController,
                                modifier = Modifier.padding(innerPadding),
                                viewModel = viewModel
                            )
                        }
                    }

                    composable() { backStackEntry ->

                        Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                            PageRegister(
                                navHostController = navController,
                                modifier = Modifier.padding(innerPadding),
                                viewModel = viewModel,
                                isForgot = pageReg.isForgot,
                            )
                        }
                    }

                    composable(
                    ) { backStackEntry ->

                        val pageReg: PageRegister = backStackEntry.toRoute()

                        Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                            PageRegisterNext(
                                navHostController = navController,
                                modifier = Modifier.padding(innerPadding),
                                viewModel = viewModel,
                                isForgot = pageReg.isForgot,
                            )
                        }
                    }

                }

            }
        }
    }


}

when i use navigate to second page

navHostController.navigate(PageRegister)

The first page is gone like this.

I would like to know the reason why this happens.

As you can see, when I navigate to the second page, the first page is no longer visible. Why? Shouldn't the first page remain in its current position? When I exit the second page, the first page loads again, which I don't understand.

Why is the first page invisible or gone ?