if (
    gameTopicsItems.value.isNotEmpty()
) {
    GameTopicItem(
        modifier = modifier,
        gameTopic = gameTopicsItems.value[currentIndexState.value],
        showPreviousIcon = currentIndexState.value > 0,
        showNextIcon = currentIndexState.value < (gameTopicsItems.value.size - 1),
        onNextClick = { currentIndexState.value += 1 },
        onPreviousClick = { currentIndexState.value -= 1 },
        showShuffleIcon = gameTopicsItems.value.size > 1,
        onShuffleClick = {
            currentIndexState.value = gameTopicsItems.value.indices.random()
        }
    )
} else {
    EmptyItemsView(modifier = modifier.padding(top = paddingNormal))
}

So far this logic is working fine, but the issue is on displaying the item drawable. I have an image in the item composable that displays the image from drawable res like shown below:

Image(
    modifier = Modifier
        .constrainAs(gameTopicIcon) {
            start.linkTo(parent.start)
            top.linkTo(<http://parent.top|parent.top>)
        }
        .fillMaxWidth()
        .wrapContentHeight()
        .padding(
            start = paddingXxl1,
            end = paddingXxl1,
            top = paddingXxl2
        ),
    painter = painterResource(
        id = gameTopic.icon
    ),
    contentDescription = gameTopic.title,
    contentScale = ContentScale.FillWidth,
)

The issue I have is, upon iterating the list a few times, the images(which are vectors) start to be displayed weirdly as shown in the screenshots below. What could be the issue?