Se modifica el como se muestra la preview de la imagen

import { useState } from 'react';

import "react-toastify/dist/ReactToastify.css";

import { UseFormSetValue } from 'react-hook-form';

import { TownFormValues } from '../../infraestructure/entities/town';

import { Town } from '../../infraestructure/entities/town';

interface props {

  setValue : UseFormSetValue<TownFormValues>

  setValue : UseFormSetValue<Town>

}

export const ImageDropzone = ({setValue}: props) => {

  const MAX_SIZE = 10485760;

  const [preview, setPreview] = useState<string | ArrayBuffer | null>(null);  

  const {fileRejections,getRootProps, getInputProps} = useDropzone(

  const {getRootProps, getInputProps} = useDropzone(

    {

      multiple: false,

      maxSize: MAX_SIZE,

        'image/png': []

      },

      onDrop(acceptedFiles, fileRejections) {

        const file = new FileReader;

        fileRejections.map(({file, errors}) => (

          toast.error(errors[0].message, {

            position: "bottom-right",

            theme: "colored"

            })));

        acceptedFiles.map((file)=>{

          {setValue('imageURL',file,{shouldValidate: true})}

        acceptedFiles.forEach((file)=>{

          const preview = URL.createObjectURL(file);

          setValue('imageURL',file,{shouldValidate: true});

          setPreview(preview);

        });

        file.onload = () => {

          setPreview(file.result);

        };

        file.readAsDataURL(acceptedFiles[0]);

      }

    }

  );