Android Jetpack Compose Navigation Screen Flickers

Question

I am using Navigation in Compose. When user moves from one screen to another the screen flickers. The flickering appears to be due to the screen being rendered multiple times. I am not able to understand what is triggering multiple compositions.

Here is my Navigation.kt file

@Composable
fun Navigation(navController: NavHostController,context: Context) {
    NavHost(
    navController = navController,
    startDestination = Routes.PersonList.route
    ) {

        composable(Routes.PersonList.route) {
            var  onItemClick: (String) -> Unit= { selectedPerson ->

                navController.navigate(Routes.Personetail.route.replace("{id}", selectedPerson)) {

                    popUpTo(Routes.TestList.route) {
                        saveState = true
                    }

                    launchSingleTop = true

                    restoreState = true
                }
            }

            PersonList(navController = navController,onItemClick)
        }

        composable(Routes.PersonDetail.route,
            arguments = listOf(                                       
                navArgument("id") { type = NavType. IntType})) {backStackEntry ->
            backStackEntry.arguments?.getInt("id")
                ?.let { PersonDetail(it,navController = navController) }
        }

    }
}

sealed class Routes(val route: String) {
    object PersonList : Routes("List")
    object PersonDetail : Routes("Detail/{id}")

}

Here is relevant code extract where I navigate from PersonList screen to PersonDetails screen

...........
 Card(
        modifier = Modifier
            .padding(4.dp)
            .fillMaxWidth()
            .clickable {
                 onItemClick(personModel.id.toString())
            },
.......

Kindly help