Tengo un componente de reacción con un estado que contiene la fuente del archivo, la URL del archivo y algunos otros valores que provienen de los campos de texto en ese mismo componente. Cuando renderizo ese componente varias veces e intento configurar un archivo para ellos, funciona bien para el primero, pero cuando intento configurar un archivo en el segundo o tercer componente, etc., establece ese archivo en el primero. solamente (estado del primer componente). El estado no se comparte, no se extrae del componente principal. Cuando trato de cambiar el texto en los campos de texto, funciona bien, el texto aparece donde debería en todos ellos. ¿Alguna idea de lo que está mal con esto y cómo podría solucionar este problema? Gracias por adelantado.

Código de controladores de estado y estado del componente:

 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 }); };