why is my bottom bar titles doesn't align bottom?

I made a bottom bar in compose, but for some reason I can't align the titles to the bottom, maybe because the bottom bar has a bottom border, I'm not sure, but I want less space under the titles, so I want to align them a little lower and take the pictures a little above it. So I want to scroll down both the image and the title.I added padding but it didnt work properly. Can you help me with this? here are my codes

BottomBar

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun BaseBottomBar(
    currentDestination: NavDestination?,
    navController: NavHostController,
    bottomSheetState: ModalBottomSheetState
) {

    val configuration = LocalConfiguration.current
    val screenWidth = configuration.screenWidthDp.dp

    val coroutineScope = rememberCoroutineScope()
    val bottomBarItemCount = 5
    val dividerLength = screenWidth / bottomBarItemCount
    val dividerColor = MaterialTheme.colors.contrastColor

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .statusBarsPadding()
    ) {
        BottomAppBar(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            Box(modifier = Modifier.fillMaxSize()) {

                BottomNavigation {
                    BottomAppBarItems.values().toList().forEach { item ->
                        BottomNavigationItem(
                            modifier = Modifier.padding(bottom = 2.dp, top = 7.dp),
                            label = {
                                item.title?.let {
                                    Text(
                                        text = stringResource(id = it),
                                        fontSize = 11.sp,
                                        softWrap = false, // Align the title to the center,
                                        textAlign = TextAlign.Center,
                                    )
                                }
                            },
                            icon = {
                                item.icon?.let {
                                    Icon(
                                        imageVector = ImageVector.vectorResource(id = it),
                                        contentDescription = "Navigation Icon",
                                    )
                                }
                            },
                            selected = currentDestination?.hierarchy?.any {
                                it.route == item.route
                            } == true,
                            unselectedContentColor = LocalContentColor.current.copy(alpha = ContentAlpha.disabled),
                            onClick = {
                                item.route?.let {
                                    navController.navigate(it) {
                                        popUpTo(navController.graph.findStartDestination().id)
                                        launchSingleTop = true
                                    }
                                }
                            }
                        )
                    }
                }
                Divider(
                    modifier = Modifier
                        .width(dividerLength),
                    thickness = 2.dp,
                    color = dividerColor
                )
            }
        }

        FancyCenterItem(
            modifier = Modifier
                .align(Alignment.Center),
            centerItemIcon = ImageVector.vectorResource(R.drawable.ic_bottom_bar_fab),
            contentColor = DefaultDYTColor,
            centerItemOnClick = {
                coroutineScope.launch {
                    if (bottomSheetState.isVisible)
                        bottomSheetState.hide()
                    else
                        bottomSheetState.animateTo(ModalBottomSheetValue.Expanded)
                }
            },
            backgroundColor = Color.Transparent
        )
    }
}

@Composable
fun FancyCenterItem(
    modifier: Modifier,
    centerItemIcon: ImageVector,
    contentColor: Color,
    backgroundColor: Color,
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(0.dp, 0.dp),
    centerItemOnClick: () -> Unit
) {

    FloatingActionButton(
        modifier = modifier,
        onClick = (centerItemOnClick),
        backgroundColor = backgroundColor,
        contentColor = contentColor,
        elevation = elevation
    ) {
        Icon(
            imageVector = centerItemIcon,
            contentDescription = "fab button"
        )
    }
}

BottomAppBarItems

enum class BottomAppBarItems(
    val icon: Int?,
    val title: Int?,
    val route: String?
) {
    HOME(
        route = BottomBarScreen.HomeScreen.route,
        title = R.string.main,
        icon = R.drawable.ic_bottom_bar_home_light_theme
    ),
    SEARCH(
        route = BottomBarScreen.ContentScreen.route,
        title = R.string.search,
        icon = R.drawable.ic_search
    ),
    FAB(
        route = null,
        title = null,
        icon = null
    ),
    HEALTH(
        route = BottomBarScreen.PlansScreen.route,
        title =  R.string.health,
        icon = R.drawable.ic_apple
    ),
    OTHERS(
        route = BottomBarScreen.DietitiansScreen.route,
        title = R.string.other,
        icon = R.drawable.ic_others
    )
}

You can try using the .align() modifier to align the labels to the bottom of the BottomNavigationView. You can use the BottomNavigationItemBuilder.label parameter to pass in a Composable that contains the label text and then use the Box() Composable to align the label text to the bottom of each individual BottomNavigationItem. Here's an example modification to your code:

BottomNavigation {
BottomAppBarItems.values().toList().forEach { item ->
    BottomNavigationItem(
        modifier = Modifier.padding(vertical = 7.dp),
        label = {
            Box(contentAlignment = Alignment.BottomCenter, modifier = 
Modifier.height(18.dp)) { // align labels to the bottom
                item.title?.let {
                    Text(
                        text = stringResource(id = it),
                        fontSize = 11.sp,
                        softWrap = false,
                        textAlign = TextAlign.Center,
                    )
                }
            }
        },
        icon = {
            item.icon?.let {
                Icon(
                    imageVector = ImageVector.vectorResource(id = it),
                    contentDescription = "Navigation Icon",
                )
            }
        },
        selected = currentDestination?.hierarchy?.any {
            it.route == item.route
        } == true,
        unselectedContentColor = LocalContentColor.current.copy(alpha = 
 ContentAlpha.disabled),
        onClick = {
            item.route?.let {
                navController.navigate(it) {
                    popUpTo(navController.graph.findStartDestination().id)
                    launchSingleTop = true
                }
            }
        }
    )
  }
}

Here, we're using a Box() with contentAlignment set to Alignment.BottomCenter around the label text, with a height of 18.dp to reduce the space between the labels and the BottomNavigationView. You can adjust this value as needed. The padding for BottomNavigationItem has been set to vertical = 7.dp to give some extra space between the icons and the labels.