Problem accessing multiple rows of data outside a PrimeReact datatable

Question

I have an app that is using NextJS and PrimeReact components. I am trying to filter data based on rows to utilize join tables in PostgreSQL. Basically, each row should return a name based on the meeting_id and student_id. The problem is that the useState for meetings seems to only pull the last row and return the data for that only.

Here is the code:

  const [meetingId, setMeetingId] = useState<number>(0);
  const { data: getAttendeesByMeeting } =
    api.attendees.getAttendeesByMeeting.useQuery(meetingId) as {
      data: MeetingAttendees[];
    };

  const [attendees, setAttendees] = useState<MeetingAttendees[]>([]);
  useEffect(() => {
    setAttendees(getAttendeesByMeeting);
  }, [getAttendeesByMeeting, meetingId]);

const getName = (rowData: Meeting) => {
// Get attendees only for this meeting
const currentAttendees = attendees.filter(
  (a) => a.meeting_id === rowData.id
);

setMeetingId(rowData.id);

if (attendees.length > 0) {
  // Map attendee ids to student names
  const names = currentAttendees.map((attendee) => {
    const student = getStudentsBySchool.find(
      (s) => s.id === attendee.student_id
    );
    console.log('student', student);
    return `${student?.first_name} ${student?.last_name}`;
  });

  // Join names into string
  return names.join(', ');
}

return 'Unknown';};