Tengo una serie de archivos que puede completar a través de una etiqueta type="file". Luego, los datos se muestran al usuario, donde el propio usuario puede hacer clic en una pequeña cruz en el lado derecho del nombre de los archivos cargados.

Agregar datos al estado de la matriz funciona con una actualización perfecta. Pero si se eliminan los datos y puedo ver que el estado es una matriz vacía al registrar su valor en la consola, los datos que se muestran no se actualizan.

 const [pfps, setPfps] = useState([]) function handleSetPfps(e) { setPfps([...pfps, e.target.files[0]]) } async function removeFile(i) { const newPfps = pfps await newPfps.splice(i, 1) setPfps(newPfps) }

Y esta es la función que muestra los nombres de los archivos, que aún muestra los nombres de los archivos incluso después de que se hayan eliminado del estado.

 {pfps?.map((pfp, index) => ( <div className='bg-slate-200 p-1 m-1 block'> {short(pfp.name)} <XIcon className='w-4 h-4 inline ml-3 mr-1' onClick={async () => await removeFile(index)} /> </div> ))}

¿Cómo puedo resolver este error y ver el cambio real cuando elimino cosas del estado?