React native Как сделать выбор файлов по очереди?

Использую react-native-document-picker

Есть кнопка 'add file'. Каждый раз, когда мы нажимаем на кнопку, добавляется новый элемент. В элементе мы выбираем файл, который хотим загрузить.(отображаются две кнопки 'выбрать файл' и 'удалить') При нажатии на выбор файла открывается document-picker. Мы выбираем файл и после элемент должен обновится и в середине должно появиться название выбранного файла (кнопка 'выбрать файл' и 'удалить' не пропадает). При нажатии на кнопку 'Удалить' файл сбрасывается и можно выбрать его снова. При нажатии на кнопку 'add file' появляется новый элемент с тем же функционалом.

Проблема, с которой я столкнулся:

Каждый раз, когда я выбираю файл, его имя отображается только при добавлении следующего элемента.(не обновляется выбранный файл) Каждый раз, когда добавляется новый элемент, имя файла дублируется, а не отображается пустой элемент. (название файла выбранного в первом элементе отображается в каждом новом элементе). При добавлении нового файла вместо получения элемента с новым именем добавляемого файла строки с именем файла дублируются одна под другой (правда, имена файлов у них разные, как и должно быть)

Вопрос: Как реализовать добавление файла в разные элементы?

Что я делаю :

Есть кнопка, которая добавляет новый элемент и позволяет пользователю выбрать файл:

<View>
      {views.map((item,index) => {
        return (
          <View>
            {item}
          </View>
        );
      })}
      <TouchableOpacity 
      style={MapStyle.UploadButton}
      onPress={addItems}
      > 
      <Text style={{textAlign: 'center'}}>Add file up to 5 MB</Text> 
      </TouchableOpacity>
      </View>

const addItems = () => {
    const arr = [...views];
    arr.push(<FilesView />);

    setViews(arr);
  };

  const deleteItems = () => {
    const arr = [...views];
    arr.push();

    setViews(arr);
  };

Реализация кнопки выбора файла:

const FilesView = () => {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity
        style={MapStyle.SelectFileButton}
        activeOpacity={0.5}
        onPress={selectFile}
        >
        <Text style={{textAlign: 'center',color:'blue'}}>Select File</Text>
      </TouchableOpacity>
      <View>
      {/*Showing the data of selected Single file*/}
      {multipleFile.map((file, index) => (
            <View style={MapStyle.inputText2}>
            <Text
              key={index.toString()}
              style={MapStyle.textStyle}
              numberOfLines={1}
              ellipsizeMode={'middle'}>
              {file?.name}
            </Text>
        </View>
      ))}
      </View>
        <TouchableOpacity style={MapStyle.DeleteButtons} onPress={() => { deleteItems(); deleteFile();}}>
                    <Text style={{textAlign: 'center'}}>Delete</Text>
                    </TouchableOpacity>
      </View>
    );
  };

Выбор файла и запись его в массив:

const selectFile = async () => {
    try {
      const res = await DocumentPicker.pickSingle({
        type: [DocumentPicker.types.allFiles],
      });
      console.log('res : ' + JSON.stringify(res));
      const newFile = [...multipleFile];
      newFile.push(res);
      setMultipleFile(newFile);
    } catch (err) {
      setMultipleFile(null);
      if (DocumentPicker.isCancel(err)) {
        alert('Canceled');
      } else {
        alert('Unknown Error: ' + JSON.stringify(err));
        throw err;
      }
    }
  };