Lazyrow crashes because of 'IndexOutOfBoundsException' android compsoe

I used a lazycolumn to dispaly a list of photos. Photos are displayed with its path. Problem occured when I try to delete an image. I have a button on each image and when click it, its path is removed from the photoList. But when I click the delete button, the photoList is modiifed but the UI didn't change. And if I scroll the row at this time, the app will crash and show error message as 'IndexOutOfBoundsException'. I think that was due to the row is not recomposed. What is the reason. How do I fix?

Composable which call photoList

val photoList MutableList

onDeleteClick = { path ->
                photoList.remove(path)

            }

Photo row compsoable
LazyRow(
    modifier = Modifier
        .padding(vertical = 16.dp)
        .wrapContentHeight()
        .fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(16.dp),
    state = rememberLazyListState(),
    contentPadding = PaddingValues(horizontal = 16.dp)
    ) {
        items(photoList) { path ->
        ImageCard(path) {
        onDeleteClick(path)
    }

ImageCard
IconButton(
            onClick = { onDeleteClick(path) },
            modifier = Modifier.align(Alignment.TopEnd)
        ) {
            Icon(
                imageVector = Icons.Default.Delete,
                contentDescription = "Delete",
                tint = Color.White
            )
        }

The problem is probably that your photoList is not wrapped in a state which would trigger Compose recomponsition on change

Below is a sample code where I wrapped the photoList in a remember construct. It is not exactly the same code as you have not really provided the whole code, so I had to improvise but hopefully, you will get the point

val photoList = remember {
    // Wrap your photo list data in a state so it can trigger recomposition
    mutableStateOf(List(20) { index -> "Index $index" })
}

LazyRow(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(16.dp),
    contentPadding = PaddingValues(horizontal = 16.dp)
) {
    items(photoList.value) { text ->
        Text(
            text = text,
            modifier = Modifier
                .clickable {
                    // Modify the state value, this will trigger recomposition
                    photoList.value = photoList.value.minus(text)
                }
        )
    }
}

In LazyColumn/LazyRow you have to add Unique key in items, based on the unique key only particular item got update.

LazyRow(
modifier = Modifier
    .padding(vertical = 16.dp)
    .wrapContentHeight()
    .fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(16.dp),
state = rememberLazyListState(),
contentPadding = PaddingValues(horizontal = 16.dp)
) {
    items(photoList,key = { it -> it.yourUniqueId ) { path ->
    ImageCard(path) {
    onDeleteClick(path)
}