How do I enter Text Input within the new View being generated and store it in an object array?

Question

Currently, I am trying to build an exercise tracker application. As of now, I can select an exercise from a dropdown menu. Upon selecting, a new view will populate the screen with the exercise name.

Next, I need to be able to have each view that is generated also allow the user to enter an indefinite amount of sets (two text inputs for weight and reps) every time the submit button within the generated view is pressed. The weight and rep information should be stored in an object (likely JSON) will eventually be sent to a Mongo DB.

This is the code I have. Am I generally going to right direction? I would appreciate any help or critique in general.

Code below:

import { View, ScrollView, Modal, Picker, Text, TouchableOpacity, TextInput, StyleSheet, Button, FlatList  } from 'react-native';
import myExerciseList from './ExerciseList';

const exercises = myExerciseList

const ExerciseList = () => {
  const [views, setViews] = useState([]);
  const [visible, setVisible] = useState(false);
  const [selectedValue, setSelectedValue] = useState(null);

  const [newExerciseDocument, setNewExerciseDocument] = useState({
    Reps: '',
    Weight: '',
  });
  const [exerciseDocuments, setExerciseDocuments] = useState([]);

  const handleInputChange = (name, value) => {
    setNewExerciseDocument({ ...newExerciseDocument, [name]: value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    setExerciseDocuments([...exerciseDocuments, newExerciseDocument]);
    setNewExerciseDocument({ Reps: '', Weight: ''});
    console.log(newExerciseDocument)
    console.log(exerciseDocuments)
  };

  const handlePress = (item) => {
    setSelectedValue(item)
    const newView = <View style={styles.ExerciseBox} key={views.length} >
                      <Text>Exercise: {item.name}</Text>
                      <Text>Weight:</Text>
                      <TextInput
                        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
                        onChangeText={(value) => handleInputChange('Reps', value)}
                        value={newExerciseDocument.Reps}
                      />
                      <Text>Reps:</Text>
                      <TextInput
                        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
                        onChangeText={(value) => handleInputChange('Weight', value)}
                        value={newExerciseDocument.Weight}
                      />
                      <Button title="Submit" onPress={handleSubmit} />
                    </View>;
    setViews([...views, newView]);
    setVisible(false);
  };

  return (
    <View>
      {/* Render the views */}
      {views}

      {/* Add a new view */}
      <TouchableOpacity onPress={() => setVisible(true)}>
          <Text>Select an Exercise</Text>
        </TouchableOpacity>
        <Modal visible={visible}>
          <ScrollView>
            {exercises.map((item) => (
              <TouchableOpacity key={item.id} onPress={() => handlePress(item)}>
                <Text>{item.name}</Text>
              </TouchableOpacity>
            ))}
            <TouchableOpacity onPress={() => setVisible(false)}>
              <Text>Cancel</Text>
            </TouchableOpacity>
          </ScrollView>
        </Modal>
        <Button title="Submit All"  />
    </View>
  );
}

const styles = StyleSheet.create({
  ExerciseBox: {
    flex: 1,
    flexDirection: 'column',
    borderWidth: 2,
    borderRadius: 5
  },
  InputText: {
    flex: 1,
    height:20,
    width: 75
  }
})

export default ExerciseList;