Selecting 1 Index from a Mapped array

I am trying to build a Sound Board.
I’m having a hard time understanding how to select one index to change my button’s colour as currently it is changing all the buttons, but I want to change only one.

$isActive is passed above in a styled comp like this :
const Button = styled.button<{ $isActive?: boolean }>background: ${props => props.$isActive ? "linear-gradient(55deg, #ff00e1, #ffb9df,#ffb9df, #ff00cc);" : "black"};

export default function BassPlayer() {
const [activeSound, setActiveSound] = useState(null);
const [activeIndex, setActiveIndex] = useState(null);
const [isActive, SetIsActive] =useState(false); 

const createSound = (beat: string) => {
    return new Howl({
        src: beat,
        autoplay: false,
        loop: false,
        volume: 0.5
    });
}

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

)

};