I have a composable screen for the tablet implementation, where on the left side I have a panel with a list of buttons, once a user clicks on any of these buttons it opens the related screen in the right panel.

In order to support this functionality I use NavHost in the right panel

...
    Column(
        modifier = Modifier
            .background(Color.Cyan.copy(alpha = 0.2f)) // TODO: JUST FOR TESTING
            .fillMaxHeight()
            .weight(2f)
    ) {
        NavHost(
            navController = navController,
            startDestination = LanguageSettingsScreenRoute.ROUTE
        ) {
            composable(LanguageSettingsScreenRoute.ROUTE) {
                LanguageSettingsScreen()
            }
            composable(DeviceSettingScreenRoute.ROUTE) {
                DeviceSettingScreen()
            }
        }
    }
...

So, here I have LanguageSettingsScreenRoute as a startDestination

Then (eg:) a user clicks on the DeviceSettingScreen

...
                SettingItem.SettingType.LANGUAGE_SETTINGS ->
                    navigator.navigate(route = LanguageSettingsScreenRoute) {
                        popUpTo(LanguageSettingsScreenRoute.buildRoute()) { inclusive = true }
                    }
                SettingItem.SettingType.DEVICE_SETTINGS ->
                    navigator.navigate(route = DeviceSettingScreenRoute) {
                        popUpTo(DeviceSettingScreenRoute.buildRoute()) { inclusive = true }
                    }
...

So, I expect DeviceSettingScreen to be the only screen in the stack, however, actually, it goes on top of LanguageSettingsScreen. So, when I click back once it pop ups second screen – DeviceSettingScreen and then it is necessary to click back again in order to pop up first scrren LanguageSettingsScreen and quit.

The question is – how to keep only one “selected” screen in the stack and remove all others, so a user clicks back once and quits.