How to make file selection one by one?

I am using react-native-document-picker

There is an “add file” button. Each time we click on the button, a new element is created. In the element, we select the file that we want to upload. (to use the two buttons ‘choose file’ and ‘delete’) We select the file and after the element should be updated, and in the middle the name of the selected file should appear (button “choose file” and “delete” does not disappear). When writing with the ‘Delete’ command, the file is reset and you can select it again. Follow the “add file” procedure with a new element with the same functionality.

The problem I faced:

Every time I select a file, its name is only displayed when the next item is added. (not updating the selected file) Every time a new item is added, the file name is duplicated instead of showing an empty item. (the name of the file selected in the first element is displayed in each new element). When adding a new file, instead of getting an element with a new name of the file being added, the lines with the file name are duplicated one under the other (however, they have different file names, as they should)

Question: How to implement adding a file to different elements?