When creating a product I use React-Dropzone but when editing I intend to use it in the same way. I would like that when editing the product, the images that are already uploaded to the product are displayed under React-Dropzone so that the user can delete them all, or just one, etc.

This code works fine when uploading images, but when I pass the array with the images that already have the product in the database at the time of editing, it shows me the empty image preview:

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

...

How can I accomplish this task? Thank you.