Se mueven la preview a las props

import { ToastContainer, toast } from 'react-toastify';

import './assets/css/styles.css'

import { useDropzone } from "react-dropzone";

import { useState } from 'react';

import { Dispatch, SetStateAction, useState } from 'react';

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

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

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

interface props {

  setValue : UseFormSetValue<Town>

  setValue : UseFormSetValue<Town>;

  preview : string | ArrayBuffer | null;

  setPreview: Dispatch<SetStateAction<string | ArrayBuffer | null>>;

}

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

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

  const MAX_SIZE = 10485760;  

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

  const {getRootProps, getInputProps} = useDropzone(

    {

      multiple: false,