Snackbar hidden under topbar of scaffold in jetpack compose project

Question

I was trying to implement a custom snackbar in a jetpack compose project, when implementing the same, it is visible under the top app bar of a scaffold. below i have pasted my custom composable as well as the main screen code Custom Snackbar

@Composable
fun MySnackbar(
    snackbarHostState: SnackbarHostState,
    message: String,
    indicator_color: Color,
    padding: PaddingValues,
    action: () -> Unit
) {
    SnackbarHost(
        hostState = snackbarHostState
    ) {
        Row(
            modifier = Modifier
                .padding(padding)
                .padding(horizontal = 25.dp, vertical = 16.dp)
                .height(56.dp)
                .background(color = dashBG, shape = RoundedCornerShape(size = 28.dp))
                .shadow(elevation = 5.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Image(
                modifier = Modifier
                    .padding(start = 16.dp)
                    .size(24.dp)
                    .background(indicator_color, CircleShape)
                    .padding(4.dp),
                imageVector = Icons.Outlined.Close,
                contentDescription = "snackbar image"
            )
            Text(
                modifier = Modifier
                    .padding(start = 12.dp),
                text = message,
                color = Color.White,
                fontWeight = FontWeight(600),
                fontSize = 15.sp,
                fontFamily = fontFamily
            )
            Box(modifier = Modifier.fillMaxWidth()){
                Image(
                    modifier = Modifier
                        .size(12.dp)
                        .clickable {
                                   snackbarHostState.currentSnackbarData?.dismiss()
                        },
                    imageVector = Icons.Outlined.Close,
                    contentDescription = "snackbar image",
                    colorFilter = ColorFilter.tint(color = Color.White)
                )
            }
        }
    }

    LaunchedEffect(key1 = true) {
        delay(500L)
        snackbarHostState.showSnackbar(
            message = message,
            actionLabel = null,
            duration = SnackbarDuration.Short
        )
    }
}

Main Screen Code

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CommunityScreen(
    padding: PaddingValues
) {
    val snackbarHostState = remember {
        SnackbarHostState()
    }
    Scaffold(
        snackbarHost = { snackbarHostState },
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Text(
                        text = "Community",
                        fontFamily = fontFamily,
                        fontWeight = FontWeight(600),
                        fontSize = 26.sp
                    )
                },
                colors = TopAppBarDefaults.smallTopAppBarColors(
                    containerColor = BGMain
                )
            )
        },
        modifier = Modifier
            .fillMaxSize(),
        containerColor = BGMain
    ) { values ->
        MySnackbar(snackbarHostState = snackbarHostState, message = "Profile Verification failed!", Color.Red, values) {}
        Column(
            modifier = Modifier
                .padding(values)
                .padding(padding)
                .padding(top = 20.dp)
                .fillMaxSize()
                .background(color = Color.White, shape = RoundedCornerShape(8.dp))
        ) {
        }
    }
}

I want to show the snackbar above the top appbar of the screen!

I tried implementing snackbar host into the scaffold as in the code given.. but none gave any result