Conditional Rendering problem

"use client"
export default function Comment () {
    const {data,isLoading}=useSWR('/api/login',fetcher)

    const [liked, setLiked] = useState(false)

    const handleLike = async()=>{ 
         try { 
             // Perform API call to add like 
             await axios.post("/api/like/", { 
               postId: post.id, 
             }); 
             setLiked((prevLiked) => !prevLiked); 
             router.refresh(); 
  
           } catch (error) { 
             console.log("Error adding like", error); 
           } 
     }

    const handleRemoveLike = async()=>{ 
         try { 
             // Perform API call to remove like 
             const updatedLikes = likes.filter((like: { userId: any; }) => like.userId == data?.id); 
             console.log(updatedLikes) 
             await axios.delete(`/api/like/${updatedLikes[0].id}`); 
  
             router.refresh(); 
             setLiked((prevLiked) => !prevLiked); 
           } catch (error) { 
             console.log("Error removing like", error); 
           } 
     }

return(
      <div className='px-8 py-4 flex flex-row justify-between'> 
         {likes.some((like:any) => like.userId === data?.id) || liked? ( 
           <AiFillHeart size={24} onClick={handleRemoveLike} /> 
         ) : ( 
           <AiOutlineHeart size={24} onClick={handleLike} /> 
         )}{post.likes.length}{' '} <FaRegCommentDots size={24} onClick={() => setShowComments(!showComments)} />{post.comments.length}{' '}<IoMdShareAlt size={24} onClick={handleShare}/></div>
)
}