Element not being removed from DOM in ReactJS using Reducer

I have a reducer which keeps track of a list of files and images and upload progress like so:

const [uploads, dispatch] = useReducer(reducer, {
        inDropZone: false,
        files: [],
        progress: [],
        images: [],
        uploadType: null,
        uploadId: null,
    });

The way I display the files is using map:

{ uploads.files.map((file,index) => {
    return (
        <FileUploadImagePreview
            key={index}
            file={file}
            imageUrl={uploads.images[index].url}
            progress={uploads.progress[index]}
            handleDeleteObject={(e) => handleDeleteObject(file, e)}
        />
    )
})}

In handleDeleteObject I call the reducer to delete the object, which successfully removes it from the array:

(In the reducer):
case REDUCER_ACTIONS.REMOVE_FILE:
    let fileToRemove = action.file
    let reducerRemoveFiles = {
        files: state.files.filter((f) => f.name !== fileToRemove.name),
        images: state.images.filter((i) => i.filename !== fileToRemove.name),
        progress: state.progress.filter((p) => p.filename !== fileToRemove.name),
    }
    return { ...state, files: reducerRemoveFiles.files.slice(0,maxFiles), images: reducerRemoveFiles.images.slice(0,maxFiles), progress: reducerRemoveFiles.progress.slice(0,maxFiles) }

However the item still remains on the page. I’ve tried removing the element by ID and I am not managing to do so, but shouldnt the FileUploadImagePreview component be removed automatically when the recuder array changes? I do have a useEffect in use on this page, in case that is interfering at all:

useEffect(() => {
    if(uploads.files.length) handleUploadFiles()
}, [uploads.files])

I just want the component to be removed when I click the delete button inside it.