Just an idea

MainActivity.kt

package com.example.android.codelab.animationdemo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.BackHandler
import androidx.activity.compose.setContent
import androidx.activity.viewModels
import androidx.compose.animation.Crossfade
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.android.codelab.animationdemo.ui.theme.AnimationDemoTheme

data class Animal(val id: Long, val name: String)

val Animals = listOf(
    Animal(1L, "Dog"),
    Animal(2L, "Cat"),
    Animal(3L, "Rabbit"),
    Animal(4L, "Duck"),
)

class MainActivity : ComponentActivity() {

    private val viewModel: MainViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AnimationDemoTheme {
                Main()
            }
        }
    }
}

sealed class Destination {
    object AnimalList : Destination()
    data class AnimalDetail(val id: Long) : Destination()
}

class MainViewModel : ViewModel() {
    var destination: Destination by mutableStateOf(Destination.AnimalList)
}

@Composable
fun Main() {
    Scaffold(
        topBar = { TopAppBar(title = { Text(stringResource(R.string.app_name)) }) }
    ) {
        val viewModel: MainViewModel = viewModel()
        Crossfade(targetState = viewModel.destination) { destination ->
            when (destination) {
                is Destination.AnimalList -> {
                    AnimalList(
                        onAnimalSelected = { id ->
                            viewModel.destination = Destination.AnimalDetail(id)
                        }
                    )
                }
                is Destination.AnimalDetail -> {
                    AnimalDetail(destination.id)
                }
            }
        }
    }
}

@Composable
fun AnimalList(
    onAnimalSelected: (id: Long) -> Unit
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(items = Animals) { animal ->
            Box(
                modifier = Modifier
                    .clickable { onAnimalSelected(animal.id) }
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Text(text = animal.name)
            }
        }
    }
}

@Composable
fun AnimalDetail(id: Long) {
    val viewModel: MainViewModel = viewModel()
    BackHandler {
        viewModel.destination = Destination.AnimalList
    }
    val animal = Animals.find { it.id == id } ?: return
    Text(
        text = animal.name,
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        style = MaterialTheme.typography.h3
    )
}