I have a react component with a state that holds file source, file URL, and some other values that come from text fields in that same component. When I render that component multiple times and try to set a file to them, it works fine for the first one, but when I try to set a file on the second or third, etc. components, it sets that file to the first one only (first component state). The state is not shared, not pulled down from the parent component. When I try to change the text in the text fields, it works fine, the text appears where it should on all of them. Any ideas what is wrong with this, and how could I fix this problem? Thanks in advance.

Component state and state handlers code:

const [value, setValue] = useState({
    fileSrc: null,
    fileURL: '',
    name: '',
    desc: '',
    price: 0,
});

const handleFile = (e) => {
    setValue({
        ...value,
        fileSrc: e.target.files[0],
        fileURL: URL.createObjectURL(e.target.files[0])
    });
};

const handleValueChange = (prop) => (event) => {
    setValue({ ...value, [prop]: event.target.value });
};