JSON file of 7000 meetings in multiple timezones and Flatlist

Question

I'm a basic developer working on a pet project and getting myself in knots on the best approach for displaying this in a React Native app via Flatlist.

First off, this is the format of the JSON file. There are approx 7,000 of these records in the file and many are in a variety of different timezones.

id:         1
name:       "Meeting 1"
timezone:   "America/Los_Angeles"
day:        2
time:       "19:00"
url:        "https://teams.meetings.com/xyz321"

id:         2
name:       "Meeting 2"
timezone:   "America/New_York"
day:        4
time:       "11:30"
url:        "https://teams.meetings.com/xyz567"

id:         3
name:       "Meeting 3"
timezone:   "Australia/Sydney"
day:        1
time:       "15:45"
url:        "https://teams.meetings.com/abc987"

What I would like to do is;

1. Get the local timezone of the user and
2. filter all meetings occurring on the current day only and
3. filter these meetings that are happening within the next hour and
4. display these meeting details in the user's local date / time as individual items within a React Native Flatlist.

I'd really appreciate if someone could offer some guidance. My getTzHourfunction only fires once in the filter process (returning the time of the first JSON record timezone only). This is incorrect as I need to get the timezone of each proceeding record to return that record's time.

import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { FlatList, StyleSheet, View, Text } from 'react-native';
// import DeviceInfo from 'react-native-device-info';

// Assuming meetingsData is an array of objects parsed from the JSON file
const MeetingData = require('../data/Meetings.json');

const MeetingList = () => {

    const date = new Date;
    let getTzHour = ( tzName ) => {
        let tzTime = (new Intl.DateTimeFormat('en-AU',
            {
                timeZone: tzName,
                hour: '2-digit',
                hour12: false,
            }
        ).format(date));
        let tzHour = tzTime + ':00' // zero the minutes to round the hour to 'hh:00' which matches the json time format
        return tzHour;
    };

    const Meetings = MeetingData.reduce(item =>
        (item.time === getTzHour(item.timezone)) // this only fires the getTzHour function once. How do I get it to loop for every item.timezone it finds?
    );

    console.log(Meetings.length);

    const renderMeetingItem = ({ item }) => {
        return (
            <View style={styles.item}>
                <Text style={styles.title}>Name: {item.name}</Text>
                <Text style={styles.title}>Local Time: {item.time}</Text>
                <Text style={styles.title}>- - - - - - </Text>
                <Text style={styles.title}>Meeting URL: {item.url}</Text>
            </View>
        )
    };
  
  return (
    <View style={styles.container}>
        <FlatList
        data={Meetings}
        renderItem={renderMeetingItem}
        keyExtractor={(item, index) => index.toString()}
        />
    </View>
  );
};

export default MeetingList;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
    },
    item: {
        backgroundColor: '#DDD',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
      },
      title: {
        fontSize: 18,
        color: '#000000'
      },
});