How to Display images you captured inside a horizontal pager in kotlin jetpack compose

Question

I am trying to capture images inside a horizontal pager composable, Each time I take an image I want it to be displayed inside the horizontal pager. The application crashes every time I capture an image, I suspect it is because of the parameters of key and id inside the horizontal pager.

if (hasImages()) {
    Column {
        myMainViewModel.capturedImageUris.value.forEach() { uri ->
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight(0.40f)
                    .clip(RoundedCornerShape(0, 0, 15, 16))

            ) {
                HorizontalPager(
                    state = pagerState,
                    key = { myMainViewModel.capturedImageUris.value[it] },
                    pageSize = PageSize.Fill
                ) { index ->
                    Image(
                        painter = painterResource(
                            id = myMainViewModel.capturedImageUris.value.indexOf(
                                uri
                            )
                        ), contentDescription = null,
                        contentScale = ContentScale.Crop,
                        modifier = Modifier.fillMaxSize()
                    )
                }

                IconButton(
                    onClick = {
                        scope.launch {
                            pagerState.animateScrollToPage(
                                pagerState.currentPage - 1
                            )
                        }

                    },
                    modifier = Modifier.align(Alignment.CenterStart)
                ) {
                    Icon(
                        imageVector = Icons.Default.KeyboardArrowLeft,
                        contentDescription = "Go back"
                    )
                }
                IconButton(
                    onClick = {
                        scope.launch {
                            pagerState.animateScrollToPage(
                                pagerState.currentPage + 1
                            )
                        }
                    },
                    modifier = Modifier.align(Alignment.CenterEnd)
                ) {
                    Icon(
                        imageVector = Icons.Default.KeyboardArrowRight,
                        contentDescription = "Go Forwared"
                    )
                }


            }
        }

    }
} else {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(0.40f)
            .clip(RoundedCornerShape(0, 0, 15, 16))

    ) {

        Image(
            modifier = Modifier // Adjust the size of the image as needed
                .fillMaxSize()
                .fillMaxWidth()
                .background(Color.DarkGray),
            painter = rememberAsyncImagePainter(null),
            contentDescription = null,
            contentScale = ContentScale.Crop,
        )
    }
}

I am expecting to see an image each time I take a photo and that image must be displayed inside the horizontal pager.