Se crea el componente y los estilos de la zona donde se agrega la imagen

.image_dropzone_container {

  width: 90%;

}

.image_dropzone {

  cursor: pointer;

  border-color: #eeeeee;

  border-style: dashed;

  background-color: #fafafa;

  outline: none;

  color: #bdbdbd;

  aspect-ratio: 1/1;

  display: flex;

  justify-content: center;

  align-items: center;

}

.image_dropzone:hover {

  border-color: rgb(106, 188, 226);

  color: rgb(43, 38, 38);

}

.image_dropzone img {

  height: 100%;

  width: 100%;

  object-fit: contain;

}

 No newline at end of file

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

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

import { useDropzone } from "react-dropzone";

import { useState } from 'react';

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

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

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

interface props {

  setValue : UseFormSetValue<TownFormValues>

}

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

  const MAX_SIZE = 10485760;

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

  const {fileRejections,getRootProps, getInputProps} = useDropzone(

    {

      multiple: false,

      maxSize: MAX_SIZE,

      accept: {

        'image/jpeg': [],

        'image/png': []

      },

      onDrop(acceptedFiles, fileRejections) {

        const file = new FileReader;

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

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

            position: "bottom-right",

            autoClose: 1500,

            hideProgressBar: false,

            closeOnClick: true,

            pauseOnHover: false,

            draggable: true,

            progress: undefined,

            theme: "colored"

            })));

        acceptedFiles.map((file)=>{

          {setValue('imageURL',file)}

        });

        file.onload = () => {

          setPreview(file.result);

        };

        file.readAsDataURL(acceptedFiles[0]);

      }

    }

  );

  return (

    <div className='image_dropzone_container'>

      <div {...getRootProps({className: "image_dropzone"})}>

        <input {...getInputProps()}/>

        {preview ? (

          <img src={preview as string} title='Arrastra tu imagen o seleccionala dando click aquí'></img>

        ) : (

          <p>Arrastra tu imagen o seleccionala dando click aquí.</p>

        )}

      </div>

      <ToastContainer

        position='bottom-right'

        autoClose = {1000}

        hideProgressBar = {true}

        closeOnClick

        rtl={false}

        pauseOnFocusLoss

      />

    </div>

  );

}

 No newline at end of file