Why I cant use Modifier.sharedBounds in jetpack compose

I followed the official tutorial trying to add animations in my project. But when I copy and paste the code Modifier.sharedBounds(rememberSharedContentState(key = "bounds")... to my android studio I got an Unresolved reference: sharedBounds error.

I've added the animation dependency(version 1.7.0-rc01) in my project and here are all my dependencies

dependencies {

    implementation(libs.androidx.core.ktx)
    implementation(libs.androidx.lifecycle.runtime.ktx)
    implementation(libs.androidx.activity.compose)
    implementation(platform(libs.androidx.compose.bom))
    implementation(libs.androidx.ui)
    implementation(libs.androidx.ui.graphics)
    implementation(libs.androidx.ui.tooling.preview)
    implementation(libs.androidx.material3)
    implementation(libs.androidx.navigation.runtime.ktx)
    implementation(libs.androidx.navigation.compose)
    testImplementation(libs.junit)
    androidTestImplementation(libs.androidx.junit)
    androidTestImplementation(libs.androidx.espresso.core)
    androidTestImplementation(platform(libs.androidx.compose.bom))
    androidTestImplementation(libs.androidx.ui.test.junit4)
    debugImplementation(libs.androidx.ui.tooling)
    debugImplementation(libs.androidx.ui.test.manifest)
    implementation(libs.vico.compose.m3)
    implementation(libs.vico.views)
    implementation(libs.kotlinx.coroutines.android)
    implementation(libs.androidx.animation)
}

I wonder if I am missing some necessary dependencies

It's a scoped Modifier for SharedTransitionScope, you can call scoped modifiers only inside the scopes they are defined in. You need to use

SharedTransitionLayout or SharedTransitionScope composables

SharedTransitionLayout {
    val sharedTransitionState = rememberSharedContentState("key")

    AnimatedContent(
        targetState = visible
    ) { target ->

        Modifier.sharedBounds(
            sharedContentState = sharedTransitionState,
            animatedVisibilityScope = this@AnimatedContent
        )
    }
}

SharedTransitionScope {
    AnimatedVisibility(
        visible = visible
    ) {

        val sharedTransitionState = rememberSharedContentState("key")

        Modifier.sharedBounds(
            sharedContentState = sharedTransitionState,
            animatedVisibilityScope = this@AnimatedVisibility
        )
    }
}

or directly passing SharedTransitionScope as in sample below.

@Composable
private fun MainContent(
    onShowDetails: () -> Unit,
    modifier: Modifier = Modifier,
    sharedTransitionScope: SharedTransitionScope,
    animatedVisibilityScope: AnimatedVisibilityScope
) {
    with(sharedTransitionScope) {
        Row(
            modifier = Modifier
                .padding(8.dp)
                .sharedBounds(
                    rememberSharedContentState(key = "bounds"),
                    animatedVisibilityScope = animatedVisibilityScope,
                    enter = fadeIn(),
                    exit = fadeOut(),
                    resizeMode = SharedTransitionScope.ResizeMode.ScaleToBounds()
                )
                // ...
        ) {
            // ...
        }
    }
}

https://developer.android.com/develop/ui/compose/animation/shared-elements#understand-scopes