Jetpack Compose: Buttons in TopAppBar Remain Clickable After Overlaying Box

I have a TopAppBar with buttons, and I overlay it with a Box that has a semi-transparent background to hide and block interaction with the buttons on the TopAppBar. However, despite the Box covering the buttons visually, they remain clickable, and the Box doesn’t seem to prevent the clicks from going through.

Question: What’s the best way to overlay clickable elements in Jetpack Compose to ensure they don’t respond to clicks when covered by another Box?

I've tried the following approaches, but the issue persists:

1. Adding a zIndex modifier to the Box to bring it to the top layer.
2. Applying a Modifier.clickable to the Box to intercept clicks.(This helps, but I’m not sure if this is the right way to go, because the buttons under the box remain clickable)
3. Checking the layout hierarchy in the debugger, but I couldn’t identify an obvious cause.

Please try to replace the Box with a Surface, which by default consumes all touch interactions:

Surface(
    color = Color.Black.copy(alpha = 0.6f),  // add semi transparency
    //...
){ 
   //....
}