Inputs value is the same as others input when using array.push()

Question

I have a problem where the value of my inputs are all the same when I am using array.push(). So basically, the input time and select dropdown below will render based on the dropdown above (how many times a day). If the user select 2, the input time and select dropdown below will render to 2 times. After that, when I want to input the time and select dropdown, the value will be the same for all the input. The sample interface will be shown in the picture below. So do you guys have any idea on how to solve this?

import React from 'react'
import DateTimePicker from "@react-native-community/datetimepicker";
import { StyleSheet, View, Platform } from "react-native";
import {
  Select,
  SelectItem,
  IndexPath,
  Button
} from "@ui-kitten/components";
import { useState } from "react";

const to12Hours = require("to12hours");

const cap = [1, 2, 3, 4, 5, 6, 7];

export default function Reminder(displayHowt) {

  const [date, setDate] = useState(new Date());
  const [mode, setMode] = useState("date");
  const [show, setShow] = useState(false);
  const [time, setTime] = useState("00.00");
  const [selectedCap, setSelectedCap] = React.useState(new IndexPath(0));


  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === "ios");
    setDate(currentDate);

    let tempDate = new Date(currentDate);

    setTime(to12Hours(tempDate.toTimeString().slice(0, 5)));
  };
  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };
  const showTimepicker = () => {
    showMode("time");
  };
  const displayCap = cap[selectedCap.row];
  const renderOption = (title) => <SelectItem title={title} />;

  let x = new Array(displayHowt.displayHowt);
  console.log(x)
  console.log(displayHowt.displayHowt);

    let items=[];
    
    for (let i = 0; i < displayHowt.displayHowt; i++) {
      items.push(<View key={i} style={styles.row}> 
        <Button appearance='ghost' status='primary'  onPress={showTimepicker} >{time}</Button>
        {show && (
          <DateTimePicker
          name={`input-${i}`}
            testID="TimePicker"
            value={date}
            mode={mode}
            is24Hour={false}
            onChange={onChange}
          />
        )}
        <Select
        name={`select-${i}`}
            label="Capsule"
            style={styles.howt}
            placeholder="Default"
            value={displayCap}
            selectedIndex={selectedCap}
            onSelect={(index) => setSelectedCap(index)}
          >
            {cap.map(renderOption)}
          </Select>
      </View>);
    }

 
  return (<View>
    {items}
  </View>
  )
}


const styles = StyleSheet.create({
  row: {
    margin: 10,
    flexDirection: "row",
    justifyContent: "center",
    alignContent: "space-between",
  },
  howt: {
    width: 150,
    marginBottom: 10,
    color: "black",
  },
});