Multiple FileUpload PrimeReact state management

Question

I'm running into an issue here. What I'm trying to do essentially is having a form that has the doc name (in this case we'll call it documents) and doc number and other fields, but not important at the moment. Within in this form a user can upload pdf files that are related to this one form and each file that has been uploaded has 2 drop downs that can associate user and country. That is what I want and need, however, it appears that the state management that I have as of now overwrites the selection of country and applies to all of them.

EX: Expected behavior

File 1: User: Danny M., Country: Mexico
File 2: User: Leo Messi, Country: Argentina
File 3: User: C. Ronaldo, Country: Portugal

Actual Behavior

File 1: User: Danny M., Country: Mexico <---- If I change just these two fields it reflects to all
File 2: User: Danny M., Country: Mexico
File 3: User: Danny M., Country: Mexico

The code as it follows below:

let document = {
        document_name: '',
        document_number: '',
        region: '',
        country: '',
        user: '',
        // Other fields
    }

const [documentInput, setDocumentInput] = useState<any>(document)

const onModalChange = (e: any) => {
        console.log(e.target)
        const { id, value } = e.target
        setDocumentInput({
             ...documentInput,
             [id]: value,
        })
    }

const itemTemplate = (file: any, props: any) => {
        return (
            <div className='flex align-items-center flex-wrap px-0 py-1'>
                <div className='inline-flex align-items-center'>
                    <label className='upload-label' htmlFor='user'>
                        Original Filename:
                    </label>
                    <span className='flex flex-column text-left ml-3'>
                        {file.name}
                        <small>{new Date().toLocaleDateString()}</small>
                    </span>
                </div>
                <Tag
                    value={props.formatSize}
                    severity='warning'
                    className='px-3 py-2'
                />
                <div className='inline-flex align-items-center'>
                    <label className='upload-label' htmlFor='user'>
                        User:
                    </label>
                    <AutoComplete
                        className='ml-3'
                        value={documentInput.user}
                        suggestions={filteredUsers}
                        completeMethod={searchUser}
                        field='label'
                        forceSelection
                        dropdown
                        id='language'
                        onChange={e => modalChange(e)}
                    />
                </div>
                <div className='inline-flex align-items-center'>
                    <label className='upload-label' htmlFor='country'>
                        Country:
                    </label>
                    <AutoComplete
                        className='ml-3'
                        value={documentInput.country}
                        suggestions={filteredCountries}
                        completeMethod={searchCountry}
                        field='label'
                        forceSelection
                        dropdown
                        id='country'
                        onChange={e => modalChange(e)}
                    />
                </div>
                <Button
                    type='button'
                    icon='pi pi-times'
                    className='p-button-outlined p-button-rounded p-button-danger ml-auto'
                    onClick={() => onTemplateRemove(file, props.onRemove)}
                />
            </div>
        )
    }

return(
    <>
        //Other fields
        <FileUpload
            ref={fileUploadRef}
            name='demo[]'
            url='upload'
            multiple
            accept='application/pdf'
            id='upload_docs'
            maxFileSize={1000000}
            onUpload={onTemplateUpload}
            onSelect={onTemplateSelect}
            onError={onTemplateClear}
            onClear={onTemplateClear}
            headerTemplate={headerTemplate}
            itemTemplate={itemTemplate}
            emptyTemplate={emptyTemplate}
            chooseOptions={chooseOptions}
            uploadOptions={uploadOptions}
            cancelOptions={cancelOptions}
        />
    </>
)

I understand why every time we change user or country is over writing to all files when each file dropdown should independent but don't know how to overcome this issue. Also what is name="demo[]" what is it exactly? I apologize if I am asking a lot in this post, I'm just a little confused on how to tackle this issue. If the question and/or explanation is not clear please let me know and I'll try and edit this post. Thanks in advance.