Onclick requires two clicks for element, when clicking friend element, it requires 2 clicks for it to become true

When I click friend button, it takes 2 clicks to become true I want to click just once and for isFriend to be set true

function FriendChoice({friend, index}) {
    const [showHobbies, setShowHobbies] = useState(false);
    const [friendClicked, setFriendClicked] = useState(false);
    // const[isFriend, setIsFriend] = useState(false);
    // const[showActivity, setShowActivity] = useState(false);
    const db = getDatabase();
    let friendClass = "friend-card";
    const handleClick = async () => {
        try {
            const path = "Friends/" + index + "/isFriend";
            const friendRef = ref(db, path);
            setFriendClicked(!friendClicked);
            await firebaseSet(friendRef, friendClicked);
        } catch (error) {
            console.log(error);
        }
    }

   if(friend.isFriend) {
   friendClass = "friend-card friend-card-clicked";
 }

return (
<div className={friendClass} onClick={handleClick} onMouseEnter={() => setShowHobbies(true)} onMouseLeave={() => setShowHobbies(false)}>
  <img src={friend.img} alt={friend.alt} />
  <div className="d-flex flex-column friend-font">
    {!showHobbies && (
      <p><strong>{friend.name}</strong></p>
    )}
    {showHobbies && (
      <p>
        A:{friend.activity} H:{friend.hobby}
      </p>
    )}
  </div>
</div>
);
}

Thank you for your help javascript class have around 2 hours to submit