Jetpack Compose Bottom Bar icons do not fit into open element area

I create my BottomBar on Jetpack Compose. The main requirements are the absence of a background, large icons with captions and indents from the edges of the screen. For some reason, the icons are not placed in the BottomBar area. Is there a way to increase it, or am I doing something wrong?

Main Screen:

@Composable
fun FishingShopApp(
    modifier: Modifier = Modifier,
    navController: NavHostController = rememberNavController()
) {
   ...

    Crossfade(targetState = Navigator.currentScreen) { currentScreen ->
        Box {
            Image(
                modifier = Modifier.fillMaxSize(),
                painter = painterResource(R.drawable.bg_main_screen),
                contentDescription = null,
                contentScale = ContentScale.FillBounds
            )
            Scaffold(
                topBar = {
                    if (needToShowTopBar(currentScreen.value)) TopAppBar(
                        scaffoldState,
                        coroutineScope
                    )
                },
                drawerContent = {
                    AppDrawer(
                        closeDrawerAction = { coroutineScope.launch { scaffoldState.drawerState.close() } }
                    )
                },
                scaffoldState = scaffoldState,
                bottomBar = {
                    Box(modifier = Modifier.fillMaxWidth()) {
                        CompositionLocalProvider(LocalRippleTheme provides ClearRippleTheme) {
                            CustomBottomBar()
                        }
                    }
                },
                backgroundColor = Color.Transparent,
            ) { innerPadding ->
                BackHandler {
                    Navigator.navigateBack(navController)
                } ...

Custom Bottom Bar:

@Composable
fun CustomBottomBar() {
    var selectedItem by remember { mutableStateOf(0) }

    val items = listOf(
        NavigationItem(0, R.drawable.ic_home, R.string.scr_main_screen_icon_lbl),
        NavigationItem(
            1,
            R.drawable.ic_fishing,
            R.string.scr_fishing_icon_lbl,
        ),
        NavigationItem(2, R.drawable.ic_basket, R.string.scr_basket_icon_lbl),
    )
    BottomNavigation(
        backgroundColor = Color.Transparent, elevation = 0.dp,
        modifier = Modifier.wrapContentHeight()
    ) {
        items.forEach {
            BottomNavigationItem(
                icon = {
                    Icon(
                        imageVector = ImageVector.vectorResource(id = it.vectorResourceId),
                        contentDescription = stringResource(id = it.contentDescriptionResourceId),
                        tint = if (selectedItem == it.index) Color.White else Green,
                        modifier = Modifier
                            .background(
                                shape = RoundedCornerShape(
                                    topStartPercent = 20,
                                    topEndPercent = 20,
                                    bottomEndPercent = 20,
                                    bottomStartPercent = 20
                                ),
                                color = if (selectedItem == it.index) Green else Color.White,
                            )
                            .padding(if (it.index == 1) 12.dp else 15.dp)
                            .scale(if (it.index == 1) 0.8f else 1f)
                    )
                },
                selected = selectedItem == it.index,
                onClick = {
                    selectedItem = it.index
                },
                label = {
                    Text(
                        text = stringResource(id = it.contentDescriptionResourceId),
                        color = Color.White
                    )
                },
            )
        }
    }
}

Expected Result:

Expected result

My Result:

Wrong result