Move snackbar above the bottom nav bar jetpack compose

Question

I am creating custom Snackbar using Jetpack Compose. But I have also implemented BottomNavBar using Scaffold. Everything works fine but only one problem is snackbar goes under the BottomNavBar. So how to move above to the snackbar over BottomNavBar?

Snackbar code:

@Composable
fun DefaultSnackbar(
    snackbarHostState: SnackbarHostState,
    onDismiss: () -> Unit?,
    modifier: Modifier = Modifier
) {
    SnackbarHost(
        hostState = snackbarHostState,
        modifier = modifier,
        snackbar = {data ->
            Snackbar(
                modifier = Modifier.padding(8.dp),
                content = {
                    Text(
                        text = data.message,
                        style = MaterialTheme.typography.body2,
                        color = White
                        )
                },
                action = {
                    data.actionLabel?.let { actionLabel ->
                        TextButton(
                            onClick = {
                                onDismiss()
                            }
                        ) {
                            Text(
                                text = actionLabel,
                                style = MaterialTheme.typography.body2,
                                color = White
                            )
                        }
                    }
                }
            )
        }
    )
}

Bottom Navigation Code :-

@Composable
fun BottomNav()
{
    BottomNavigation(
        elevation = 15.dp,
        modifier = Modifier.zIndex(5f)
    ) {
        BottomNavigationItem(
            icon = {Icon(imageVector = Icons.Filled.Search, contentDescription = "search icon", tint = Color.White)},
            selected = false,
            onClick = { /*TODO*/ }
        )
        BottomNavigationItem(
            icon = {Icon(imageVector = Icons.Filled.Home, contentDescription = "search icon", tint = Color.White)},
            selected = true,
            onClick = { /*TODO*/ }
        )
        BottomNavigationItem(
            icon = {Icon(imageVector = Icons.Filled.MoreVert, contentDescription = "search icon", tint = Color.White)},
            selected = false,
            onClick = { /*TODO*/ }
        )
    }
}

Calling snackbar :

@ExperimentalCoroutinesApi
@AndroidEntryPoint
class RecipeListFragment : Fragment() {

    private val viewModel: RecipeListViewModel by viewModels()

    private val snackbarController = SnackbarController(lifecycleScope)

    @ExperimentalComposeUiApi
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return ComposeView(requireContext()).apply {
            setContent {

                AppTheme(darkTheme = viewModel.isDarkTheme.value) {

                    val recipes = viewModel.recipes.value
                    val query = viewModel.query.value
                    val selectedCategory = viewModel.selectedCategory.value
                    val scaffoldState = rememberScaffoldState()

                    Scaffold(
                        topBar = {
                            SearchBar(
                                query = query,
                                onQueryChange = viewModel::onQueryChange,
                                selectedCategory = selectedCategory,
                                onSelectedCategoryChanged = viewModel::onSelectedCategoryChanged,
                                onToggleTheme = viewModel::onToggleTheme,
                                searchRecipe = {
                                    if (viewModel.selectedCategory.value?.value == "Milk") {
                                        snackbarController.getScope().launch {
                                            snackbarController.showSnackbar(
                                                scaffoldSate= scaffoldState,
                                                message = "Milk is in Snack",
                                                actionLabel = "Hide",
                                            )
                                        }
                                    } else {
                                        viewModel.searchRecipe()
                                    }
                                }
                            )
                        },
                        bottomBar = { BottomNav() },
                        scaffoldState = scaffoldState,
                        snackbarHost = {scaffoldState.snackbarHostState},
                    ) {

                        Box(modifier = Modifier
                            .background(MaterialTheme.colors.background)
                            .fillMaxSize())
                        {
                           ...
                           others items 
                           ...

                            CircularIndeterminateProgressBar(display = viewModel.isLoading.value)

                            DefaultSnackbar(
                                snackbarHostState = scaffoldState.snackbarHostState,
                                onDismiss = { scaffoldState.snackbarHostState.currentSnackbarData?.dismiss()},
                                modifier = Modifier.align(Alignment.BottomCenter)
                            )
                        }
                    }
                }
            }
        }
    }
}