Why does liking one option like all the rest?

Question

I am attempting to have a single user be able to choose from 1 of 2 options but when I like one they are all liked for some reason.

This is the result. I have an onClick function on the heart so that it adds the red.

https://i.stack.imgur.com/r73UB.png

Below is the code that runs when I click on the heart. I basically set the usersID into a collection called likes and save thier username

const [likes, setLikes] = useState([])
const [hasLiked, setHasLiked] = useState(false)

const likeFighter = async (e) => {

    const docRef = doc(db, 'userpicks', value)
    const docSnap = await getDoc(docRef)

    const picksRef = doc(db, 'picks', value)
    const pickSnap = await getDoc(picksRef)

    let fighterID = e.target.id.toLowerCase().replace(' ', '-').replace(' ', '-')

    if (hasLiked) {
        await deleteDoc(doc(db, 'picks', value, 'likes', userInfo.uid))
    }
    else {
        if (fighterID !== ' ') {
            await setDoc(doc(db, 'picks', value, 'likes', userInfo.uid), {
                username: userInfo.uid
            })
        }
    }
}

This is what the database looks like. The main collection is called 'picks'. The parent collection that is.

https://i.stack.imgur.com/JVrk3.png

I also have these useEffects with snapshot listeners that run every-time a user likes a particular fighter. How can I have it so that they are only able to like one of the two fighters? If they like the left fighter they cannot like the right and vice versa.

  useEffect(() => onSnapshot(collection(db, 'picks', value, 'likes'), (snapshot) =>
    setLikes(snapshot.docs)
), [db, value])



useEffect(
    () =>
        setHasLiked(
            likes.findIndex((like) => like.id === userInfo.uid) !== -1
        ),
    [likes]
)

This is the logic that gets the fighter information from the database and renders it on the screen. I tried using the fighters name as an id so that on click it likes that particular fighter but It doesn't work.

const renderFights = fight.map((element, idx) => {
    return (

        <Paper elevation={0} id={element.fightID} key={idx} sx={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'space-evenly' }} >
            <Paper elevation={1} key={element.fighterRed} sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '50%', m: 3 }}>
                <Avatar sx={{ mt: 1 }} src={element.fighterRedImage} />
                <Typography variant='body1'> {element.fighterRed} </Typography>
                <Typography variant='overline' sx={{ fontSize: '14px' }}> {element.fighterRedRecord} </Typography>
                <Paper sx={{ display: 'flex' }} elevation={0} name={element.fightID}>

                    {hasLiked ?
                        <FavoriteIcon id={element.fighterRed} onClick={likeFighter} sx={{ cursor: 'pointer', color: 'red' }} /> :
                        <FavoriteBorder id={element.fighterRed} onClick={likeFighter} sx={{ cursor: 'pointer' }} />
                    }
                    {likes.length > 0 && (
                        <Typography>{likes.length}</Typography>)
                    }

                </Paper>
            </Paper>
            <Paper elevation={0} sx={{ width: '10%', display: 'flex', flexDirection: 'column', mt: 3, mb: 3, justifyContent: 'space-evenly', alignItems: 'center' }} >
                <Typography sx={{ fontSize: '10px', textAlign: 'center' }} variant='overline'> {element.weightClass}</Typography>
                <Typography sx={{ fontSize: '10px', textAlign: 'center' }} variant='overline'>vs</Typography>
                <Chip label="FINAL U DEC" sx={{ fontSize: '8px' }} />
            </Paper>

            <Paper elevation={1} key={element.fighterBlue} sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '50%', m: 3 }}>
                <Avatar sx={{ mt: 1 }} src={element.fighterBlueImage} />
                <Typography variant='body1'> {element.fighterBlue} </Typography>
                <Typography variant='overline' sx={{ fontSize: '14px' }}> {element.fighterBlueRecord} </Typography>
                <Paper sx={{ display: 'flex' }} elevation={0}>
                    {hasLiked ?
                        <FavoriteIcon id={element.fighterBlue} onClick={likeFighter} sx={{ cursor: 'pointer', color: 'red' }} /> :
                        <FavoriteBorder id={element.fighterBlue} onClick={likeFighter} sx={{ cursor: 'pointer' }} />
                    }
                    {likes.length > 0 && (
                        <Typography>{likes.length}</Typography>)
                    }
                </Paper>
            </Paper>
        </Paper>
    )
})