How to handle displaying and hiding a custom reusable snack bar in jetpack compose?

I have a composable of snackbar. Below is the code

@Composable
fun CealSnackbar(title: String,performAction: () -> Unit,) {

    val counterState = remember { mutableStateOf(true) }

    LaunchedEffect(Unit) {
        while(true) {
            delay(4000)
            counterState.value = false
            performAction()
        }
    }

    AnimatedVisibility(
        visible = counterState.value,
        enter = slideInVertically() + fadeIn(),
        exit = slideOutVertically() + fadeOut(),
    ) {
        Card(
            modifier = Modifier
                .absoluteOffset(x = 0.dp, y = 10.dp)
                .padding(horizontal = 20.dp)
                .fillMaxWidth()
                .statusBarsPadding()
                .background(
                    color = MaterialTheme.colors.primaryVariant,
                    shape = RoundedCornerShape(10.dp)
                ), elevation = 20.dp
        ) {
            Row(
                modifier = Modifier
                    .background(color = MaterialTheme.colors.primaryVariant)
                    .padding(12.dp),
                horizontalArrangement = Arrangement.Start,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Image(
                    painter = painterResource(id = R.drawable.error_circle),
                    contentDescription = title
                )
                Text(
                    text = title,
                    fontFamily = FontFamily(Font(R.font.inter_medium)),
                    fontSize = 12.sp,
                    color = MaterialTheme.colors.primary,
                    modifier = Modifier.padding(horizontal = 10.dp)
                )
            }
        }
    }
}

I want the animation when the snackbar appears and disappears and it should be usable in any component

So while using this in other composable I am trying to display it when there is an error msg, the error msg is a state flow

if(errorMsg.isNotEmpty()){
        CealSnackbar(
            title = errorMsg, performAction = {
                registrationViewModel.setErrorMsg("")
            }
        )
    }

If I use it like above the animation does not take place, how should I refactor it so that I use it any composable when there is an error msg

Use SnackbarHost

val snackState = remember { SnackbarHostState() }
    val coroutineScope = rememberCoroutineScope()



SnackbarHost(
            hostState = snackState
        ){
            CealSnackbar(
                title = errorMsg, performAction = {
                    registrationViewModel.setErrorMsg("")
                }
            )
        }