Ripple effect not working correctly in jetpack compose

Question

I am working on ripple effect in jetpack compose. I provide my color and after clicking on view it show some time after that different type of color showing like dark grey on press state.

binding.itemComposable.setContent {
            Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(12.dp)) {
                val options = getOptions()
                options.forEachIndexed { _, optionText ->
                    val interactionSource = remember { MutableInteractionSource() }
                    val isPressed by interactionSource.collectIsPressedAsState()
                    val backgroundColor = if (isPressed) DuckEggBlue else OffWhite
                    val textColor = if (isPressed) TealBlue else Slate
                    val borderWidth = if (isPressed) 1.dp else 0.dp
                    val borderColor = if (isPressed) Aqua else OffWhite
                    Surface(
                        onClick = {
                            logE("Item Click")
                        },
                        shape = RoundedCornerShape(4.dp),
                        border = BorderStroke(borderWidth, borderColor),
                        interactionSource = interactionSource
                    ) {
                        Text(
                            modifier = Modifier
                                .fillMaxWidth()
                                .background(backgroundColor)
                                .padding(16.dp),
                            text = optionText,
                            style = Typography.h3,
                            fontWeight = FontWeight.Medium,
                            color = textColor
                        )
                    }
                }
            }
        }

Expected Output

Above image is see clearly ripple effect.

Actual output

I cannot add image, instead i added my youtube video. Please have a look.

val DuckEggBlue = Color(0xFFF0FCFC)

This is my color which I am using.

Can anyone guide me what is wrong here.

UPDATE

I tried from this doc

@Immutable
private object SecondaryRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = RippleTheme.defaultRippleColor(
        contentColor = DuckEggBlue,
        lightTheme = true
    )

    @Composable
    override fun rippleAlpha() = RippleTheme.defaultRippleAlpha(
        contentColor = DuckEggBlue,
        lightTheme = true
    )
}

In my code

CompositionLocalProvider(LocalRippleTheme provides SecondaryRippleTheme) {
            Text(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(OffWhite)
                    .padding(16.dp),
                text = optionText,
                style = Typography.h3,
                fontWeight = FontWeight.Medium,
                color = textColor
            )
    }

but nothing works. It still grey ripple effect.

Answer 1

I tried many options Box, Surface, using PointerInput to delay but maybe visually it doesn't work when you change background color with same ripple

Surface(
    modifier = Modifier
        .indication(
            interactionSource = interactionSource,
            rememberRipple(
                color = Color.Cyan
            )
        )
    ,
    shape = RoundedCornerShape(4.dp),
    contentColor = backgroundColor,
    border = BorderStroke(borderWidth, borderColor),
    onClick = {},
    interactionSource = interactionSource

    ) {
    Text(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        text = optionText,
        fontWeight = FontWeight.Medium,
        color = textColor
    )
}

With Color.Cyan

If you don't change color when pressed ripple is more apparent but your color is too light to apply for ripple as i tested with other colors.

with PointerInput I tried by changing is pressed to Boolean with initial false value

                    Modifier.pointerInput(Unit) {
                        detectTapGestures(onPress = { offset ->
                            isPressed = true
                            val press = PressInteraction.Press(offset)
//                            delay(50)
                            interactionSource.emit(press)
                            tryAwaitRelease()
                            interactionSource.emit(PressInteraction.Release(press))
                            isPressed = false
                        })
                    }