React Native: Create Time List using FlatList and DatePicker

Objective: To show a list of Time when the user selects Time from the DatePicker.

Problem: It only shows a single Time instead of list of times.

I can select time from the Datepicker. And when I clicked ok, the Selected time is shown on the flatlist. However upon selecting a new time, the old time gets replaced. This results in showing only 1 time on the list.

I have added screenshot of the app below.

Hence, any kind of help regarding solving this problem will be appreciated.

Code snippet below:

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, FlatList } from 'react-native';
import DatePicker from '@react-native-community/datetimepicker';
import Feather from 'react-native-vector-icons/Feather';
import moment from 'moment';

export default class FrCreateScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            //Time
            appointmentTime: new Date(moment()),
            modeAppointmentTime: 'time',
            showAppointmentTime: false,
            textAppointmentTime: moment().format('h:mm a').toString(),

            //new timeSlots
            timeSlots: [],
        }
    }

    //[ timePicker start]
    setAppointmentTime = (event, appointmentTime, textAppointmentTime, timeSlots) => {
        appointmentTime = appointmentTime || this.state.appointmentTime;
        textAppointmentTime = textAppointmentTime || moment(appointmentTime).format('h:mm a').toString();
        this.setState({
            showAppointmentTime: Platform.OS === 'ios' ? true : false,
            appointmentTime,
            textAppointmentTime,

            //newly added
            timeSlots: [{ time: textAppointmentTime }],
        });
    }

    showTime = (modeAppointmentTime, textAppointmentTime, timeSlots) => {
        textAppointmentTime = moment(this.state.appointmentTime).format('h:mm a').toString();
        this.setState({
            showAppointmentTime: true,
            modeAppointmentTime,
            textAppointmentTime,

            //newly added
            timeSlots: [{ time: textAppointmentTime }],
        })
    }

    timePicker = () => {
        this.showTime('time');
    }
    //[ timePicker end ]

    getAppointmentTimePage() {
        //const { timeSlots, selectedValue } = this.state;
        const {
            appointmentTime,
            showAppointmentTime,
            modeAppointmentTime,
            textAppointmentTime
        } = this.state;

        return (
            <View>
                <Text style={[styles.title, { marginTop: 20 }]}>Select Appointment Time:</Text>
                <View style={styles.container}>
                    {<TouchableOpacity onPress={this.timePicker}>
                        <Text style={styles.textDate}>
                            {textAppointmentTime}
                        </Text>
                    </TouchableOpacity>}
                    {showAppointmentTime && <DatePicker
                        value={appointmentTime}
                        mode={modeAppointmentTime}
                        onChange={this.setAppointmentTime}
                        minimumDate={new Date(moment())}
                    />}
                </View>
                <TouchableOpacity style={styles.addContainer}>
                  <Text style={styles.addText}>Add Appointment</Text>
                </TouchableOpacity>
            </View>
        );
    }

    render() {
        return (
            <ScrollView>
                {this.getAppointmentTimePage()}
                <TouchableOpacity>
                    <View style={styles.row}>
                        <FlatList
                            data={this.state.timeSlots}
                            keyExtractor={(times) => times.time}
                            renderItem={({ item }) => {
                                return (
                                    <View>
                                        <Text style={styles.textTime}>{item.time}</Text>
                                        <TouchableOpacity>
                                            <Feather name="trash" style={styles.icon} />
                                        </TouchableOpacity>
                                    </View>
                                );
                            }}
                        />
                    </View>
                </TouchableOpacity>
            </ScrollView>
        )
    };
};