PIXI Slot machine stop reel spinning at a specific symbol

Question

I've integrated this in one of my projects. https://codepen.io/k-olya/pen/WNXgQYV

Now I have modified it quite a bit according to my need like dynamic symbols etc. What I want is the scroll to stop at a symbol which is at index 0.

const slotTextures = [
        PIXI.Texture.from({% if page.related_wheel_style.winning_symbol %}'{{ page.related_wheel_style.winning_symbol.url }}', '{{ page.related_wheel_style.winning_symbol.url }}'{% endif %}),
        PIXI.Texture.from({% if page.related_wheel_style.other_symbol_1 %}'{{ page.related_wheel_style.other_symbol_1.url }}', '{{ page.related_wheel_style.other_symbol_1.url }}'{% endif %}),
        PIXI.Texture.from({% if page.related_wheel_style.other_symbol_2 %}'{{ page.related_wheel_style.other_symbol_2.url }}', '{{ page.related_wheel_style.other_symbol_2.url }}'{% endif %}),
        PIXI.Texture.from({% if page.related_wheel_style.other_symbol_3 %}'{{ page.related_wheel_style.other_symbol_3.url }}', '{{ page.related_wheel_style.other_symbol_3.url }}'{% endif %}),
        PIXI.Texture.from({% if page.related_wheel_style.other_symbol_4 %}'{{ page.related_wheel_style.other_symbol_4.url }}', '{{ page.related_wheel_style.other_symbol_4.url }}'{% endif %}),
    ];

Above is the array that holds my dynamic pics. I want the reel spinning to stop at page.related_wheel_style.winning_symbol which is index[0]

// Build the symbols
        for (let j = 0; j < 4; j++) {
            {#const symbol = new PIXI.Sprite(slotTextures[Math.floor(Math.random() * slotTextures.length)]);#}
            let textureIndex = j === 3 ? 0 : Math.floor(Math.random() * slotTextures.length);
            const symbol = new PIXI.Sprite(slotTextures[textureIndex]);
            // Scale the symbol to fit symbol area.
            symbol.y = j * SYMBOL_SIZE;
            symbol.scale.x = symbol.scale.y = Math.min(SYMBOL_SIZE / symbol.width, SYMBOL_SIZE / symbol.height);
            symbol.x = Math.round((SYMBOL_SIZE - symbol.width) / 2);

            reel.symbols.push(symbol);
            rc.addChild(symbol);
        }

This is what Ive done in my build reel loop, right now the intended symbol is places at 0th index (2 index up from middle) and here is my startPlay() function

function startPlay() {
        if (running) return;
        running = true;
        let spins = 0;
        {#const stopIndices = [0, 4, 1, 0, 0];#}
        for (let i = 0; i < reels.length; i++) {
            const r = reels[i];
            const extra = Math.floor(Math.random() * 3);
            {#const target = r.position + 10 + i * 5 + extra;#}
            const target = 2;
            const time = 2500 + i * 600 + extra * 600;
            console.log(time);
            tweenTo(r, 'position', target, time, backout(0.5), null, i === reels.length - 1 ? reelsComplete : null);

        }
    }

Note const target = 2; is what makes the entire reel roll only 2 indexes to land on the row where I have intentionally put all same symbols. But the rolling effect is too less. I want the reel to roll atleast 5 times and land on the similar row (same symbols).

I think whenever the row disappears from the canvas, my same symbol row just disappears and it randomly stops when i increase const target = 5 or const target = 5.

If anyone knows the way around to achieve what i want please comment or answer. Need help, Thanks.