Multiple recompositions are triggered while using collectAsStateWithLifecycle() method in a composable function

Question

I have a Component activity with a NavHost which has 2 composables representing 2 screens. In the first screen composable, I collect a counter value which is a stateflow present in the viewModel that holds the count value. In the second screen, I increment the counter value in the viewmodel based on an API call success. The API call is triggered from a button click & after success, I increment the counter & pop the backstack going back to the first screen to show the incremented counter value. A ViewModel is shared between the two composable screens.

Two ways to collect a stateflow present in the viewmodel in a composable function are

1. viewModel.apiStatus.collectAsState()
2. viewModel.apiStatus.collectAsStateWithLifecycle()

I understand that the latter is the recommended way as its lifecycle aware. But when I collect the apiStatus using collectAsStateWithLifecycle() and try to pop backstack to go to the first screen, the second screen is recomposing over & over again and collecting the values multiple times and incrementing the counter more than once i.e. the handleResponse() method is called multiple times.

Any help in identifying why this side effect is happening & how to solve this issue will be really helpful in my understanding of compose.

Sample Code

//called from setContent{} in MainActivity

@Composable
fun SampleNavSetup(sampleViewModel: SampleViewModel) {

    val navController = rememberNavController()

    NavHost(navController = navController,
        startDestination = SampleNav.FirstPage.route) {

       this.composable(route = SampleNav.FirstPage.route) {
           FirstPageScreen(
               viewModel = sampleViewModel,
               navHostController = navController
           )
        }

        this.composable(route = SampleNav.SecondPage.route){
           SecondPageScreen(
               viewModel = sampleViewModel,
               navHostController = navController
           )
        }
    }
 }

 @Composable
 fun FirstPageScreen(
     viewModel: SampleViewModel,
     modifier: Modifier = Modifier,
     navHostController: NavHostController
  ) {
   Column(
       modifier = modifier.fillMaxSize().padding(24.dp),
       horizontalAlignment = Alignment.CenterHorizontally
   ) {

      val result = viewModel.getIncrementCounter().collectAsStateWithLifecycle()

      Text(
        fontSize = 18.sp,
        fontWeight = FontWeight.W600,
        text = "Counter value is = ${result.value}"
      )

      Button(
         modifier = Modifier.padding(top = 36.dp),
         onClick = {
            navHostController.navigate(SampleNav.SecondPage.route)
          }
      ) {
        Text(
            text = "Nav to next",
            color = Color.White
        )
      }
    }
 }

@Composable
fun SecondPageScreen(
   viewModel: SampleViewModel,
   navHostController: NavHostController) {

   Box(modifier = Modifier.fillMaxSize()) {

       HandleApiResponse(
           modifier = Modifier.padding(top = 96.dp).align(Alignment.Center),
           viewModel = viewModel,
           navHostController = navHostController
       )

       Column(modifier = Modifier.padding(24.dp).align(Alignment.TopCenter),
           horizontalAlignment = Alignment.CenterHorizontally
       ) {

           Text(
               fontSize = 18.sp,
               fontWeight = FontWeight.W600,
               text = "Make Fake API to increment counter"
           )

           Button(
               modifier = Modifier.padding(top = 36.dp),
               onClick = {
                  viewModel.doFakeApiCall()
               }
           ) {
               Text(
                  text = "Click Me",
                  color = Color.White
               )
           }
        }
     }
  }


 @Composable
 fun HandleApiResponse(
     modifier: Modifier,
     viewModel: SampleViewModel,
     navHostController: NavHostController
  ) {

    Log.d("Collect Second Page","Collect Handle Api response composable function")
    val context = LocalContext.current

    //does not trigger multiple times with collectAsState()
    //val response = viewModel.getApiStatus().collectAsState()

    /*But with collectAsStateWithLifeCycle() it is observed multiple
     times as the screen is recomposed multiple times & handleResponse is called 
     multiple times, don't know the reason why*/
 
    val response = viewModel.getApiStatus().collectAsStateWithLifecycle()

    when (response.value) {

    FakeApiState.Loading -> {
        CircularProgressIndicator(modifier = modifier.size(32.dp),
        color = Color.Green)
    }

    FakeApiState.Success -> {
        Log.d("Collect Second Page","Collect Api status")
        handleResponse(viewModel = viewModel,navHostController=navHostController)
     }

      FakeApiState.Fail -> {
        Toast.makeText(context, "Api Fail", Toast.LENGTH_SHORT).show()
      }

      FakeApiState.Initial -> {}
   }
}

private fun handleResponse(
    viewModel: SampleViewModel,
    navHostController: NavHostController
) {
    Log.d("Second Page Response", "Collect Handle Response & popBackStack()")
    viewModel.incrementCounter()
    navHostController.popBackStack()
    viewModel.clearApiStatus()
 }


class SampleViewModel : ViewModel() {

    private val _incrementCounter = MutableStateFlow(0)
    fun getIncrementCounter() = _incrementCounter.asStateFlow()

    private val _apiStatus = MutableStateFlow(FakeApiState.Initial)
    fun getApiStatus() = _apiStatus.asStateFlow()


    fun incrementCounter() {
       _incrementCounter.value = _incrementCounter.value + 1
    }

    fun clearApiStatus() {
       _apiStatus.value = FakeApiState.Initial
    }

    fun doFakeApiCall() {
       _apiStatus.value = FakeApiState.Loading
        viewModelScope.launch {
        delay(1500L)
        _apiStatus.value = FakeApiState.Success
     }
   }
}