Problem in my store code

I was recently watching this tutorial below and came across a problem

https://www.youtube.com/watch?v=-naWf6Ah07E&list=PL2yxIm1FqbSwiLa9hrxb6mph86o5ZTjPq&index=2

Please note that the images below the main image are being repeated. Any ideas on how I could solve this problem? My code used is below. Thank you very much.

$w.onReady(function () {

    $w("#mediaRepeater").onItemReady(($item, itemData) => {
        $w("#media").src = itemData.src;
		
		$item("#media").onClick(()=>{
				$w("#mainMedia").src = itemData.src;
				$w("#mediaBackground").style.backgroundColor = "white";
				$item("#mediaBackground").style.backgroundColor = "#E8E6E6";

		})
    })

    $w("#dynamicDataset").onReady(() => {
        const product = $w("#dynamicDataset").getCurrentItem();
        console.log(product);
        $w("#mainMedia").src = product.mainMedia;

        const populateMediaRepater = () => {
            const mediaData = product.mediaItems.map((item, index) => ({ ...item, _id: index.toString() }));
            $w("#mediaRepeater").data = mediaData;
        }

		populateMediaRepater();

    })

});