使用 array.push() 时，输入值与其他输入相同

Question

我遇到一个问题，当我使用 array.push() 时，我的输入值全部相同。所以基本上，下面的输入时间和选择下拉列表将根据上面的下拉列表（一天多少次）进行渲染。如果用户选择2，则下面的输入时间和选择下拉列表将呈现为2次。之后，当我想输入时间并选择下拉列表时，所有输入的值将相同。示例界面如下图所示。那么你们知道如何解决这个问题吗？

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",
  },
});