suppose I am getting information from a given endpoint and rendering the information to the page. the endpoint contains the person's name, address, age, and sport played. Now after I render all the information on the page using javascript and React, I want to ideally add a custom property called votes that will dynamically change and reflect on the site when a user voted for a player. This is how I added the new property.

const fetchPeople = async () => {
    try {
      const response = await fetch(url);
      const data = await response.json();
      const peopleWithVotes = data.map((person, index) => {
        return {
          ...person,
          votes: '0',
        };
      });

      setPeople(peopleWithVotes);
      console.log(people)
    } catch (error) {
      console.error(error);
    }
  };

this is how I have been trying to actually dynamically change the votes but don't know if I'm going in the right direction.

const handleClick = async (event) => {
        const votes = Number(event.target.dataset.votes);
        const requestOptions = {
            method: 'PATCH',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ votes: votes + 1 })
        };
        fetch(url, requestOptions)
            .then(response => response.json())
            .then((json) => console.log(json));
    

    }