This is my FeedBack Component

const FeedbackSystem = () => { // const [Upvote, setUpvote] = React.useState(0) // const [Downvote, setDownvote] = React.useState(0) const [cards, setCards] = React.useState( [ { id: 0, name: "Readability", Upvote: 0, Downvote: 0 }, { id: 1, name: "Performance", Upvote: 0, Downvote: 0 }, { id: 2, name: "Security", Upvote: 0, Downvote: 0 }, { id: 3, name: "Documentation", Upvote: 0, Downvote: 0 }, { id: 4, name: "Testing", Upvote: 0, Downvote: 0 }, ])

function upVote(id) { //setUpvote(prev => prev + 1)

setCards(prev =>
  prev.map((card, index) => (
    index == id ?
      { ...card, Upvote: card.Upvote + 1 } : card
  )))

}

function downVote(id) { //setDownvote(prev => prev + 1) setCards(prev => prev.map((card, index) => ( index == id ? { ...card, Downvote: card.Downvote + 1 } : card ))) }

return ( { cards.map((card, index) => (

{card.name}

            {/* <button className="py-10 px-15" data-testid={`upvote-btn-${index}`} onClick={() => upVote(index)}>
              👍 Upvote
            </button>
            <button className="py-10 px-15 danger" data-testid={`downvote-btn-${index}`} onClick={() => downVote(index)}>
              👎 Downvote
            </button> */}
          </div>
          <p className="my-10 mx-0" data-testid={`upvote-count-${index}`}>
            Upvotes: <strong>{card.Upvote}</strong>
          </p>
          <p className="my-10 mx-0" data-testid={`downvote-count-${index}`}>
            Downvotes: <strong>{card.Downvote} </strong>
          </p>
        </div>
      )
      )
    }
  </div>
</div>

); };

export default FeedbackSystem;

This is my Button Component

export default function Button({upVote,downVote,id}) {

return ( <> upvote-btn-{id}} onClick={downVote}> 👎 Downvote ) } Where I made misatke , my test cases are failing

WWhere