React native typescript useEffect not updating array

Am trying to create a real time voting using Pusher, typescript and react native, but the candidates array is not being updated and displayed on the useEffect function. but when I run the same code lines from a normal vote it works (the candidates array is updated and displayed correctly);

const [candidates, setCandidates] = useState([]);const vote = (id, position, name, name2) => {  var newVoteData = ({ voterName: votingData.voterName, voterId: votingData.voterId, position: position, candidateId: id, candidateName: name });  setProcessingModal(true);  fetch("http://172.20.10.4:8000/mobile/vote", {    method: "POST",    headers: {"Content-Type": "application/json",    },    body: JSON.stringify(newVoteData),  })    .then((response) => response.json())    .then((data) => {      if (data.status == "ok") {       // This block of code works, updates the particular               // candidate voteCount and setCandidates correctly        setProcessingModal(false);        alert("Yay!!! , you have successfully voted");        const updatedData = candidates.map(x => (x.id === id ? { ...x, voteCount: data.voteCount } : x)); //updates votecount on candidate        let newArr = updatedData.sort((x, y) => {          return y.voteCount - x.voteCount;        });        setCandidates(updatedData);      } else {        setProcessingModal(false);        alert(data);      }    })    .catch((error) => {      setProcessingModal(false);      alert(error);      console.error("Error:", error);    });};

the below useEffect function is where am having issues, the array for some reason is not being updated

useEffect(() => {  const liveUpdateCandidates = (id, voteCount) => {    alert(voteCount);    const updatedData = candidates.map(x => (x.id === id ? { ...x, voteCount: voteCount } : x));//updates votecount on candidate does not work here    console.log("afer");    let newArr = updatedData.sort((x, y) => {      return y.voteCount - x.voteCount;    });    setCandidates(newArr);  };  //Pusher.logToConsole = true;  const pusher = new Pusher("3580cab8bee36d295917", {    cluster: "eu",    encrypted: true,  });  const channel = pusher.subscribe("votebooth-channel");  channel.bind("App\\Events\\BoothEvent", function(data) {    liveUpdateCandidates(data.candidateId, data.voteCount);  });  return (() => {    pusher.unsubscribe("votebooth-channel");    // pusher.unsubscribe('channel_name2');  });}, [candidates]);

Below is a sample of the returned array

[  { "id": "3", "name": "Kwaku", "candidateUserId": null, "gender": "Male", "philosophy": "Good", "voteCount": "132" },  { "id": "22", "name": "rose", "candidateUserId": null, "gender": "Female", "philosophy": "Php", "voteCount": "1" },];