Jetpack Compose: Items-list with Item-Details-view

Question

The app is based upon an exercise from a Udemy-course. The purpose is to become familiar with LazyColumns. I've enhanced the exercise with a Details-view and a navigation between LazyColumn and Details.

Here are the essential code-snippets:

// MainActivity with the definition of the navigation
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DogsLazyListTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    val navController = rememberNavController()
                    NavHost(navController = navController,
                        startDestination = Destination.Home.route) {
                        composable(Destination.Home.route) {
                            DogsList(navController = navController)
                        }
                        composable(Destination.Details.route) {
                            DogDetails(navController = navController,
                                it.arguments?.getString("index") ?: "0")
                        }
                    }
                }
            }
        }
    }
}

// Routes definition
sealed class Destination(val route: String) {
    object Home: Destination("list")
    object Details: Destination("details/{index}")
}

// Data
object Data {
    val names = listOf(
        "Labrador retriever",
        "German shepherd",
        "Golden retriever",
        // ...
    )
    val imageIds = listOf(
        R.drawable.d1_lab,
        R.drawable.d2_german_shepherd,
        R.drawable.d3_golden,
        // ...
    )
    val desc = listOf(
        "Lorem ipsum dolor sit amet, consectetuer adipiscing ...",
        "In enim justo, rhoncus ut, imperdiet a, venenatis ... ",
        "Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum ... ",
        // ...
    )
}

// Items-list, using LazyColum
@Composable
fun DogsList(navController: NavController) {
    LazyColumn(modifier = Modifier.fillMaxWidth().padding(7.dp),
        horizontalAlignment = Alignment.CenterHorizontally) {
        item() {
            Text(text = "Most popular dog breeds",
                textAlign = TextAlign.Center,
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier.fillMaxWidth().padding(bottom = 10.dp))
        }
        items(Data.names.count()) { index ->
            Card(shape = RoundedCornerShape(10.dp),
                modifier = Modifier.padding(bottom = 10.dp)
                    .clickable {
                        navController.navigate("details/${index}")
                    },
                backgroundColor = Color(0xffdedede)
            ) {
                Row(modifier = Modifier) {
                    Image(painter = painterResource(id = Data.imageIds[index]),
                        contentDescription = "",
                        contentScale = ContentScale.Crop,
                        modifier = Modifier.weight(0.34f))
                    Column(modifier = Modifier
                        .padding(10.dp)
                        .weight(0.66f)) {
                        Text(text = Data.names[index],
                            fontSize = 20.sp,
                            fontWeight = FontWeight.Bold)
                        Text(text = Data.desc[index],
                            fontSize = 16.sp)
                    }
                }
            }
        }
    }
}

// Details-View
@Composable
fun DogDetails(navController: NavController, index: String) {
    Scaffold(topBar = {
        TopAppBar(title = {
            Text("Dog Details")
        }, backgroundColor = Color(0xffdedede),
            navigationIcon = {
            IconButton(onClick = {
                navController.popBackStack()
            }) {
                Icon(painterResource(id = R.drawable.ic_arrow_back),
                    contentDescription = "")
            }
        })
    }) {
        val dogName = Data.names[index.toInt()]
        val dogDescription = Data.desc[index.toInt()]
        val dogPainter = Data.imageIds[index.toInt()]

        Column(modifier = Modifier
            .fillMaxSize()
            .padding(20.dp)) {
            Text(text = dogName, fontSize = 28.sp, fontWeight = FontWeight.Bold)
            Text(text = dogDescription, fontSize = 20.sp)
            Image(
                painter = painterResource(id = dogPainter),
                contentDescription = "",
                contentScale = ContentScale.Fit,
                modifier = Modifier
                    .fillMaxSize()
                    .clip(RoundedCornerShape(10.dp))
                    .padding(top = 20.dp, bottom = 20.dp))
        }
    }
}

I'm mostly interested in answers concerning the way I have set-up the app. Is the navigation placed well within the MainActivity? What do thing about the decision attaching the data as constants to a singleton?

All other comments and hints concerning the app appreciated too.