How to use navigation in a lazy vertical grid

Question

I am currently using a LazyVerticalGrid, but when I try to navigate to a different page, it doesn't work. How would I create working naviagation while still using the vertical grid?

My code is currently:

@Composable
fun EmotionsScreen(navController : NavHostController
) {
        LazyVerticalGrid(
            modifier = Modifier
                .fillMaxSize()
                .padding(15.dp),
            columns = GridCells.Fixed(count = 2)
        ) {
            items(DataSource.emotions)  { emotion ->
                mealTimeCards(emotion)

            }
        }
    }
}



@Composable
fun EmotionsCards(navController: NavHostController, emotion: CardContent, modifier: Modifier = Modifier) {
    Button (
        onClick = { navController.navigate(NavRoute.ForkPage.route) },
        modifier = Modifier
            .padding(8.dp),
        shape = RoundedCornerShape(10),


        ){

My code runs without errors, but when I try to click on a button in the grid, it doesn't navigate to anywhere. Should I implement navigation elsewhere? Is there a way to navigate using the vertical grid?