React not re-rendering

When i moved my code to a newer version of react for some reason its not rendering and updating 'total votes' when i click on any of the below buttons.

Edit: Also when i tried to print my data in the async functions, it comes up as null, but i checked my database and it does get updated.

Component below:

import { useState, useEffect } from "react"
import ProgressBar from "../ProgessBar"

const QuestionCard = ({ questionData, onDelete, supabase }) => {
  const [session, setSession] = useState(null);
  const [yes, setYes] = useState(questionData.votesYes);
  const [no, setNo] = useState(questionData.votesNo);
  //get user session
  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session)
    })
    //watches for changes in session
    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session)
    })
  
  }, [])

  const handleDelete = async () => {
    const { data, error } = await supabase
      .from('questions')
      .delete()
      .eq('id', questionData.id)

    if (error) {
      console.log(error)
    }
    if (data) {
      console.log(data)
      onDelete(questionData.id)
    }
  }

  const handleYes = async () => {
    const { data, error } = await supabase
      .from('questions')
      .update({ votesYes: questionData.votesYes + 1, votesTotal: questionData.votesTotal + 1})
      .eq('id', questionData.id)
    if (error) {
      console.log('errored: ' + error);
    }
    if (data) {
      //sets yes hook state
      setYes(data[0].votesYes);
      
    }
  }

  const handleNo = async () => {
    const { data, error } = await supabase
      .from('questions')
      .update({ votesNo: questionData.votesNo + 1, votesTotal: questionData.votesTotal + 1})
      .eq('id', questionData.id)
    if (error) {
      console.log(error)
    }
    if (data) {
      setNo(data[0].votesNo);
    }
  }
  const handlePollingResult = () => {
  }

  return (
    <div className="question-card">
      <h4>{questionData.question}</h4>
      <div className="polling-results">
        <h5>Total Votes: {yes + no}</h5>
      </div>
      <div><ProgressBar questionData={questionData}/></div>
      <div className="buttons">
        {!session ? <i>Please Sign in to vote</i> : <i className="yes-btn" onClick={handleYes}>Yes</i>}
        {!session ? <i></i> : <i className="no-btn" onClick={handleNo}>No</i>}
        {!session ? <i></i> : <i className="delete-btn" id='delete-btn' onClick={handleDelete}>delete</i>}
        {!session ? <i></i> : <i className="polling-result-btn" onClick={handlePollingResult}>Results data</i>}
      </div>
    </div>
  )
}

export default QuestionCard

When clicking on any of my buttons, i expected it to re-render the page and update the values, however it doesn't seem to happen please let me know if you need more information, this is my first post :)

Added a useEffect to fix this issue, and everytime i pressed the button i made sure to set the boolean in dependancy array to true:

useEffect(() => {
console.log('I rendered!');
const renderPage = async () => {
  const { data, error } = await supabase
    .from('questions')
    .select()
    .eq('id', questionData.id)

  if (error) {
    console.log(error)
  }
  if (data) {
    console.log(data)
    setYes(data[0].votesYes);
    setNo(data[0].votesNo);
  }
}
render && renderPage();
setRender(false);
}, [render])