Scaffold (Material3) with Navigation Bar and Docked FAB

Question

I'm trying to achieve a docked FAB in combination with a BottomBar using Material3 components.

I'm able to add the FAB (centred), the BottomBar having a NavigationBar and apply the cut-out to the BottomBar.

I'm also able to shift the FAB correctly but unfortunately, the entire FAB can only occupy the space above the BottomBar and not be drawn above it.

Are there any possible solutions?

If relevant, my setup:

Scaffold(
   bottomBar = {
      NavigationBar(
         modifier = Modifier.fillMaxWidth()
                .clip(backgroundShape)
                .background(Color.White, backgroundShape),
         containerColor = Color.White,
         tonalElevation = 0.dp,
     ) { [...] },
   floatingActionButton = {
      FloatingActionButton(
         elevation = FloatingActionButtonDefaults.elevation(
            defaultElevation = 10.dp
         ),
         shape = RoundedCornerShape(50),
         containerColor = Colors.brandOrange,
         contentColor = Color.White,
         onClick = { },
         modifier = Modifier
                .zIndex(1f)
                .clip(RoundedCornerShape(50))
                .absoluteOffset(y = 50.dp) // tried with and without zIndex, and with and without absolute (offset only)
      ) {
         Box(modifier = Modifier.size(56.dp), contentAlignment = Alignment.Center) {
            Icon(
               modifier = Modifier.size(24.dp),
               imageVector = Icons.Default.Add,
               contentDescription = null,
               tint = Color.White,
            )
         }
      }
   },
   floatingActionButtonPosition = FabPosition.Center,