I have a Composable that shows for each category a line with a dropdown etc and when i try to do a Foreach category do a line in the app so people can click and select a level it shows the Composable error @Composable invocations can only happen from the context of a @Composable function

levels Contains the List Of Categories

LazyColumn( modifier = Modifier.fillMaxWidth(), verticalArrangement = Arrangement.spacedBy(8.dp) ) { levels?.forEach { category -> CategoryItem(category) //Error happens here } }

This is what CategoryItem Does

` @Composable
fun CategoryItem(category: Category) {
var expanded by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp)
    ) {
        ClickableSquare(
            onClick = { expanded =!expanded },
            text = category.name
        )

        if (expanded) {
            DropdownMenu(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 16.dp),
                expanded = expanded,
                onDismissRequest = { expanded = false }
            ) {
                category.levels.forEach { level ->
                    DropdownMenuItem(
                        text = { Text(text = level.name) },
                        onClick = {
                            // Navigate to GameScreen with level data
                            navController.navigate(route = AppScreens.GameScreen.route + "/${level.code}")
                        }
                    )
                }
            }
        }
    }
}`