Cannot recognize "Modifier.sharedElement" in Jetpack Compose

I have already used imports and dependencies but there is two errors like this:

> Unresolved reference 'sharedElement'.

> Unresolved reference 'rememberSharedContentState'.

and here is part of my code.

MainActivity.kt

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class, ExperimentalTextApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            FoxusTheme {
                FoxusApp()
            }
        }
    }
}

@Composable
@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class, ExperimentalTextApi::class, ExperimentalSharedTransitionApi::class)
fun FoxusApp() {
    val navController = rememberNavController()
    SharedTransitionLayout {
        NavHost(
            navController = navController,
            startDestination = "Main"
        ) {
            composable("Main") {
                MainWithScaffold(
                    navController = navController,
                    sharedTransitionScope = this@SharedTransitionLayout,
                    animatedVisibilityScope = this@composable
                )
            }
            composable("Focusing") {
                Focusing(
                    sharedTransitionScope = this@SharedTransitionLayout,
                    animatedVisibilityScope = this
                )
            }
        }
    }

}

@Composable
@OptIn(ExperimentalMaterial3Api::class)
fun AnimatedTopBar(title: String) {
    /*...*/
}

@Composable
@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class, ExperimentalTextApi::class,
    ExperimentalSharedTransitionApi::class
)
fun MainWithScaffold(
    navController: NavController,
    sharedTransitionScope: SharedTransitionScope,
    animatedVisibilityScope: AnimatedVisibilityScope
){
    /*...define some values and variables...*/
    Scaffold(
        /*...*/
    ){ paddingValues ->
        Box(
           /*...*/
        ) {
            AnimatedContent(
                /*...*/
            ) {

                index ->
                SharedTransitionLayout {
                    when (index) {
                        0 -> FocusPage(
                            onStartClick = { navController.navigate("focusing") },
                            sharedTransitionScope = this@SharedTransitionLayout,
                            animatedVisibilityScope = this@AnimatedContent
                        )
                        1 -> TasksPage()
                        2 -> ProfilePage()
                    }
                }
            }
        }
    }
}

FocusPage.kt (where errors occur)

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
@ExperimentalMaterial3ExpressiveApi
fun FocusPage(
    onStartClick: () -> Unit,
    sharedTransitionScope: SharedTransitionScope,
    animatedVisibilityScope: AnimatedVisibilityScope
) {
    /*...define some values and variables...l*/

    Column(
        /*...*/
    ){
        Card(
            odmifier = Modifier
                .fillMaxWidth()
                .height(quickFocusCardHeight)
                .clickable { onStartClick() }
                .sharedElement(
                    rememberSharedContentState(key = "Focusing"),
                    animatedVisibilityScope = animatedVisibilityScope,
                ),
            shape = RoundedCornerShape(30.dp),
            colors = CardDefaults.cardColors(
                containerColor = MaterialTheme.colorScheme.primary
            )
        ) {/*...specifics...*/}
    }
}

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
@ExperimentalMaterial3ExpressiveApi
fun Focusing(
    sharedTransitionScope: SharedTransitionScope,
    animatedVisibilityScope: AnimatedVisibilityScope
){    
    /*...define some values and variables...l*/

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.onPrimary)
            .sharedElement(
                rememberSharedContentState(key = sharedKey),
                animatedVisibilityScope = animatedVisibilityScope
            ),
        horizontalAlignment = Alignment.CenterHorizontally
    ){/*...specifics...*/}
}

build.gradle.kts(Module: app)

dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.08.00"))
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.2")
    implementation("androidx.room:room-runtime:2.5.2")
    kapt("androidx.room:room-compiler:2.5.2")
    implementation("androidx.room:room-ktx:2.5.2")
    implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.5.1")
    implementation("com.google.code.gson:gson:2.8.8")
    implementation("androidx.datastore:datastore:1.0.0")
    implementation("androidx.datastore:datastore-preferences:1.1.7")
    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.constraintlayout)
    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("androidx.compose.material3:material3:1.3.2")
    implementation("androidx.compose.material3:material3-window-size-class:1.3.2")
    implementation("androidx.compose.material3:material3-adaptive-navigation-suite:1.5.0-alpha02")
    implementation("androidx.compose.material:material-icons-core:1.5.4")
    implementation("androidx.compose.material:material-icons-extended:1.5.4")
    implementation("androidx.compose.ui:ui:1.5.4")
    implementation("androidx.compose.ui:ui-text:1.5.4")
    implementation("androidx.compose.material3:material3:1.1.2")
    implementation("androidx.navigation:navigation-compose:2.9.3")
    implementation("androidx.compose.animation:animation:1.9.0")
}

If you want to see full code, please visit My Github Repo

According to the documentation, Modifier.sharedElement(rememberSharedContentState(key = "image"), animatedVisibilityScope = animatedVisibilityScope) should be possible.

sharedElement() and rememberSharedContentState() are functions on SharedTransitionScope. While you passed a SharedTransitionScope into FocusPage(), you do not appear to be using it.

The documentation uses with(), which would change your code to be something like:

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
@ExperimentalMaterial3ExpressiveApi
fun FocusPage(
    onStartClick: () -> Unit,
    sharedTransitionScope: SharedTransitionScope,
    animatedVisibilityScope: AnimatedVisibilityScope
) {
    /*...define some values and variables...l*/

    Column(
        /*...*/
    ){
        with(sharedTransitionScope) {
          Card(
              odmifier = Modifier
                  .fillMaxWidth()
                  .height(quickFocusCardHeight)
                  .clickable { onStartClick() }
                  .sharedElement(
                      rememberSharedContentState(key = "Focusing"),
                      animatedVisibilityScope = animatedVisibilityScope,
                  ),
              shape = RoundedCornerShape(30.dp),
              colors = CardDefaults.cardColors(
                  containerColor = MaterialTheme.colorScheme.primary
              )
          ) {/*...specifics...*/}
        }
    }
}