Cuando creo un producto, uso React-Dropzone, pero cuando edito, pretendo usarlo de la misma manera. Me gustaría que al editar el producto se muestren en React-Dropzone las imágenes que ya están subidas al producto para que el usuario pueda borrarlas todas, o solo una, etc.

Este código funciona bien a la hora de subir imágenes, pero cuando paso el array con las imágenes que ya tiene el producto en la base de datos al momento de editar, me muestra la vista previa de la imagen vacía:

 import React from 'react'; import {useDropzone} from 'react-dropzone' import { useState, useEffect } from 'react' const DragAndDrop = ({files, setFiles, setDropError }) => { console.log(files); //Array of images that the product already has in the database const onDropRejected = () => { setDropError('Imágenes con tamaño Máximo de 1MB') setTimeout(() => { setDropError('') }, 3000) } const { acceptedFiles, fileRejections, getRootProps, getInputProps } = useDropzone({ accept: { 'image/jpeg': [], 'image/jpg': [], 'image/png': [] }, maxFiles:3, maxSize:1000000, onDropRejected, onDropAccepted: acceptedFiles => { console.log(acceptedFiles); if (files.length<1){ setFiles(acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))); } else { setFiles(files.map(file => Object.assign(file, { preview: URL.createObjectURL(file) //Here I try to pass the images to create the preview but the images are not shown }))); } } }) ...

¿Cómo puedo realizar esta tarea? Gracias.