YoutubePlayerApi Fragment not appearing with Compose lazy column

I'm trying to build an FAQ screen where questions are displayed in a lazycolumn where only active question is expanded ,Each questions consist of question , answer and youtube video using Youtube player api .

I've found no direct compose component and when i searched answers suggesting inflating YoutubePlayerSupportFragment within an AndroidView

The problem is when i switch from a question to another sometimes the youtube fragment does not appear .

I've tried to creating the fragment and pass only the view downward to avoid fragment getting recreated during recomposition but that was not it , here is the code

      @Composableprivate fun FaqScreen(onCloseClick: () -> Unit) {    val viewState = viewModel.viewState.collectAsState()    Box(modifier = Modifier.fillMaxSize()) {        Column(            Modifier                .fillMaxSize()                .background(NextaColors.Primary100)        ) {            AppToolbar(                title = "FAQ",                titleColor = NextaColors.Text,                onStartIconClick = onCloseClick,                startIconPadding = 20,                iconColor = NextaColors.Primary600,                )            val expanded = remember { mutableStateOf(-1) }            val fragment = YouTubePlayerSupportFragmentXKt().apply {                initialize(                    GOOGLE_API_KEY,                    object : YouTubePlayer.OnInitializedListener {                        override fun onInitializationFailure(                            provider: YouTubePlayer.Provider,                            result: YouTubeInitializationResult                        ) {                            Timber.d("onInitializationFailure")                        }                        override fun onInitializationSuccess(                            provider: YouTubePlayer.Provider,                            player: YouTubePlayer,                            wasRestored: Boolean                        ) {                            if (wasRestored.not()) {                                player.cueVideo(viewState.value.videoUrl)                            }                        }                    })            }            val context = LocalContext.current             fm = (context as FragmentActivity).supportFragmentManager            LazyColumn(Modifier.padding(20.dp)) {                itemsIndexed(                    viewState.value.questions + viewState.value.questions                ) { index, question ->                    val isExpanded = expanded.value == index                    QuestionItem(                        question = question,                        expanded = expanded.value,                        index = index,                        isExpanded = isExpanded,                        fragment = fragment ,                        onExpandedStateChanged = {                            if (it) {                                expanded.value = index                            } else {                                expanded.value = -1                                fm?.commit(true) {                                    remove( fragment)                                }                            }                        } ,                    )                }            }        }    }}

// Question Item

 @Composableprivate fun QuestionItem(    question: FaqsResponse,    expanded: Int,    index: Int,    isExpanded: Boolean,    fragment: YouTubePlayerSupportFragmentXKt,    onExpandedStateChanged: (Boolean) -> Unit = {}) {    Column(        modifier = Modifier            .fillMaxWidth()            .padding(bottom = 10.dp)            .clip(RoundedCornerShape(10.dp))            .background(NextaColors.White)            .padding(10.dp)    ) {        ExpandableTitleBar(            modifier = Modifier.padding(start = 10.dp),            title = question.question,            showShimmering = question.question.isEmpty(),            isExpandedInitialy = false,            onExpandedStateChanged = onExpandedStateChanged        )        if (isExpanded) {            sV(h = 5)            DashedSeparator()        }    AnimatedVisibility(visible = isExpanded) {            Column(                Modifier                    .fillMaxWidth()                    .padding(8.dp)                    .animateContentSize()            ) {                val answer = question.answer.text.joinToString(separator = "\n \n")                Text(                    text = answer,                    style = black12TextStyle(),                    modifier = Modifier.padding(top = 8.dp)                )                sV(h = 20)                /* val retriever = YouTubeVideoInfoRetriever()                 kotlin.runCatching {                             retriever.retrieve(it)                             val videoDash = retriever.getInfo(YouTubeVideoInfoRetriever.KEY_DASH_VIDEO)                             println("video dash $videoDash")                             VideoView(videoUri = videoDash)                         }                 }*/             question.answer.url                    ?.let {                        if (it.isBlank()) null else it.substringAfter("v=")                    }?.let {                     viewModel.updateVideoUrl("iwxSRHthSXzct")                        YoutubePlayer(question.order, it , fragment)                   }        }        }    }}

// Youtube Player

     @Composablefun YoutubePlayer(index: Int, videoId: String ,fragment: YouTubePlayerSupportFragmentXKt) {    DisposableEffect(        AndroidView(            modifier = Modifier                .fillMaxWidth()                .height(400.dp),            factory = {                val view = FragmentContainerView(this).apply {                    id = androidx.fragment.R.id.fragment_container_view_tag                    tag = index.toString()                }                fm?.commit(true) {                    setReorderingAllowed(true)                    add(androidx.fragment.R.id.fragment_container_view_tag, fragment)                }                view            })    ) { onDispose { fm.popBackStackImmediate() } }}