I am creating a sound board with a mapped array. I have a onClick Handler which changes the colour of the button that is active/playing and Play/Pauses.

Currently I can pause the 'active' button but cannot restart the track for that button. I can stop playing that track if I press on a different button to play that buttons track.

Just looking for some help on how to Play the same button after I paused it.

Thanks :)

    const handleClick = (beat: string, index: number ) => {

        if (activeIndex === isActive) {
            setIsActive(!isActive);
            activeSound.play();
        }


        if (activeSound) {
            activeSound.stop();           
        } 

        if (!activeSound && activeIndex === isActive) {
            const newSound = createSound(beat);
            newSound.play();
            setActiveSound(newSound);
        }

        if (activeIndex !== index) {
            const newSound = createSound(beat);
            newSound.play();
            setActiveSound(newSound);
        }
        setActiveIndex(index);
    }
    return (
        <Container>
            <Title> Melody </Title>
            <Grid>
                {
                    melodyData.map((beat, index: number) => {
                        return <Button key={index} $isActive={activeIndex === index} onClick={() => handleClick(beat.src, index)}>{beat.title}</Button>
                    })
                }
            </Grid>
        </Container>
    )
};