React Native - редактирование плоского списка, но плоский список остается без изменений

Question

Я пытаюсь изменить свой плоский список для своего проекта. когда объект добавляется в плоский список, значение добавляется через состояние subjectInput, markInput и gradeInput, затем я хочу отредактировать отметку и оценку этого конкретного предмета, используя состояние newMarkinput и newGradeInput, я ожидаю, что newMarkInput и newGradeInput перезапишут текущие markInput и gradeInput, но мой текущий результат таков, что newMarkInput и newGradeInput по-прежнему являются пустыми массивами, хотя вводятся значения newMarkInput и newGradeInput.

результат журнала консоли: 80 A [{"Grade": "A", "Mark": "90", "NewGrade": [""], "NewMark": [""], "Selected": true, "Subject ":" Math "," id ":" 0.9740256550962071"}]

Я попытался добавить ExtraData в плоский список, но не уверен, правильно ли я его использую

но я подозревал, что те, которые вызывают это, возможно, видели updateSubject(), но я не уверен, как я могу это исправить

мое состояние

      const [subjectInput, setSubjectInput] = useState('');
  const [markInput, setMarkInput] = useState('');
  const [gradeInput, setGradeInput] = useState('');

  const [subjects, setSubjects] = useState([]);

  const [newMarkInput, setNewMarkInput] = useState('');
  const [newGradeInput, setNewGradeInput] = useState('');

мой addSubject()

      const addSubject = () => {
    if (subjectInput === '' || markInput === '' || gradeInput === ''){
      Alert.alert('Error', 'Please input todo');
    } else {
      const newSubject = {
        id: Math.random().toString(),
        Subject: subjectInput,
        Mark: markInput,
        Grade: gradeInput.toUpperCase(),
        Selected: false,
        NewMark: '',
        NewGrade: '',
      };
      setSubjects([...subjects,newSubject]);
      setSubjectInput('');
      setMarkInput('');
      setGradeInput('');
      setNewGradeInput('');
      setNewMarkInput('');
    }
  };

моя функция для обновления предмета

      const updateSubject = (subjectId) => {
    if (newMarkInput === '' || newGradeInput === ''){
      Alert.alert('Error', 'Please fill in all boxes');
    } else {
    const newSubject = subjects.map(item => {
      if (item.id === subjectId) {
        return {...item,Selected: false, NewMark: newMarkInput, NewGrade: newGradeInput};
      }
      return item;
    }
    );
    setSubjects(newSubject);
    console.log(newMarkInput,newGradeInput, newSubject);
  }
    setNewMarkInput('');
    setNewGradeInput('');
    setShowInputBox(false);
  };

мой список

      <FlatList
          extraData = {subjects}
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{ padding: 10 , paddingBottom: 100}}
          data={subjects}
          keyExtractor = { (item) => item.id.toString() }
          renderItem={({ item }) => {
            return <TouchableOpacity onPress={() => onPressItem(item.id)}>
              <View style={[styles.listItem , {backgroundColor: item?.Selected ? '#cc66ff' : '#fff'}]}>
              <View style={styles.subject}>
                <View>
                  <Text style={[styles.examText , {fontSize: 18}]}>
                {item?.Subject}
                  </Text>
                </View>
                <View style={styles.subjectMarkGrade}>
                  <Text style={[styles.examText , {width: '50%'}]}>
                  Mark:{item?.Mark} ( {item?.Grade} )
                  </Text>
                  <Text style={[styles.examText , {width: '50%'}]}>
                  Target: <Target/>
                </Text>
                </View>

              </View>
              <View style={{ justifyContent: 'center'}}>
                <TouchableOpacity style={[styles.delete ]} onPress={() => deleteSubject(item?.id)}>
                  <Icon name="remove" size={15} color={'#fff'} />
                </TouchableOpacity>
              </View>
            </View>
            </TouchableOpacity>;