How to give selected sign to specific component that we've select that component in react?

Question

im use spotify api to build this web and use react

i've made component card of track that include select button and then i want to change the select button if user click that with 'selected' text and if user click another button then selected button move to button that user have been clicked

for now i just make logic to change select button to selected button and the result is user can change select button to selected button in every component

im using mapping to create list of card

The result page

This is my card component

import './Albumcard.css';
import { useState, useEffect } from 'react';

const Albumcard = ({url, albumName, songName, artistName}) => {
    const [selected, setSelected] = useState(false);
    const [urlSelected, setUrl] = useState("");
    
    const handleSelect = () =>{
        if(!selected){
            setSelected(true);
            setUrl(url);
        }
        else{
            setSelected(false);
            setUrl("");
        }
    }
    

    return (
        <div className='Album-wrapper'>
            <div className='Album-image'>
                <img src={url} alt=''></img>
            </div>
            <div className='Album-description'>
                <p className='Album-name'>{albumName}</p>
                <p className='Album-title'>{songName}</p>
                <p className='Album-artist'>{artistName}</p>
            </div>
            <div className='Album-button' onClick={handleSelect}>
                {
                    (!selected)? `select` : `deselect`
                }
            </div>
        </div>
    );
}

export default Albumcard;