Re-render inside .map function in javascript

Question

I'm trying to make a seat map where the columns in the different rows are presented with the code below. I want the occupied seats to be colored red and not clickable. But the code below won't re-render the seat map after the check up to the database to check which seats are taken. Could anyone point me in the right direction to achieve this?

All the seats are marked as available, but seat 202 is marked as taken and the output from the database is right, but it won't re-render the seat 202.

[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20].map((seat) => {
  const colRef = collection(db, 'events', 'kvammalan2023', 'reservations')

  if (seat < 10) {
    let seatNumber = rowCount + `0` + seat
    const q = query(colRef, where('seat' , '==', Number(seatNumber)))
    
    getDocs(q).then((querySnapshot) => {
      console.log(querySnapshot.empty, seatNumber)
      if (querySnapshot.empty === true) {
        setAvailability(true)
      } else {
        setAvailability(false)
      }
    })
    
    return (
      <div onClick={availability === true ? checkout : null} className={availability === true ? 'p-3 seat-avail' : 'p-3 seat-taken'} style={availability === true ? { width: '4rem', cursor: 'pointer' } : { width: '4rem', backgroundColor: 'red' }}>
        <span className='text-light'>{rowCount}0{seat}</span>
      </div>
    )
  } else {
    return (
      <div onClick={availability === true ? checkout : null} className={availability === true ? 'p-3 seat-avail' : 'p-3 seat-taken'} style={availability === true ? { width: '4rem', cursor: 'pointer' } : { width: '4rem', backgroundColor: 'red' }}>
        <span className='text-light'>{rowCount}{seat}</span>
      </div>
    )
  }
})