Se modifico para que tambien se use como ventana para actualizar pueblo

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import './css/styles.css'

import { ImageDropzone } from "../../image_dropzone/image_dropzone";

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

import { Dispatch, SetStateAction, useEffect, useState } from "react";

import { useTown } from "../../../hooks/useTown";

import { State } from "../../../infraestructure/entities/state";

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

interface props {

  setWindowActive: Dispatch<SetStateAction<boolean>>,

  setShowRegisterPanel: Dispatch<SetStateAction<boolean>>

  setActualWindowActive: Dispatch<SetStateAction<boolean>>,

  statesList: State[] | null;

  forceRenderList: () => void;

  isRegister: boolean;

  form?: Town;

}

export const SuperadminPanelTownRegister = ({setWindowActive, setShowRegisterPanel, statesList, forceRenderList}:props) => {

export const SuperadminPanelTownRegister = ({setWindowActive, statesList, forceRenderList, isRegister, form,

  setActualWindowActive

}:props) => {

  const {

    register, 

    setValue, 

    errors,

    handleSubmit, 

    onSubmit, 

    onSubmitRegister,

    onSubmitUpdate, 

  } = useTown(forceRenderList);

  const [isEnglish, setIsEnglish] = useState(false);

  const [spanishDescription, setSpanishDescription] = useState("");

  const [englishDescription, setEnglishDescription] = useState("");

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

  useEffect(()=> {

    if(!isRegister && form){

      const setData = async () => {

        setValue('idTown', form.idTown);

        setValue('name',form.name);

        setSpanishDescription(form?.descriptionES || '');

        setValue('descriptionES',form.descriptionES);

        setEnglishDescription(form?.descriptionEN || '');

        setValue('descriptionEN',form.descriptionEN);

        setValue('idState',form.idState);

        setPreview(form.imageURL as string);

        const response = await fetch(form.imageURL as string);

        const blob = await response.blob();

        const file = new File([blob],'image.jpg',{type: blob.type});

        setValue('imageURL', file);

      }

      setData();

    }

  },[])

  return (

    <div className="town_register_wrap">

      <div className="town_register_header">

        Registra el pueblo mágico

        {isRegister ? "Registra el pueblo mágico": "Actualiza tu pueblo mágico"}

        <FontAwesomeIcon icon={faWindowClose} className="town_register_close_btn"

          onClick={() => {setShowRegisterPanel(false); setWindowActive(false)}}/>

          onClick={() => {setWindowActive(false); setActualWindowActive(false);}}/>

      </div>

      <div className="town_register_content">

        <form onSubmit={handleSubmit(onSubmit)}>

        <form onSubmit={handleSubmit(isRegister ? onSubmitRegister : onSubmitUpdate)}>

          <div className="town_name_state_input">

            <div className="town_name_input">

              <label className="form_label">Nombre del pueblo mágico</label>

                <label>No hay estados</label>

              : 

                <select

                  {...register('state')}>

                  {...register('idState')}>

                  <>

                    <option disabled selected={isRegister} value="">Selecciona el estado</option>

                    {statesList.map((state) => {

                    return (

                      <option key={state.stateId} value={state.stateId}>{state.name}</option>

                      <option key={state.stateId} selected={state.stateId===form?.idState} value={state.stateId}>{state.name}</option>

                    );

                    })}

                  </>

                </select>

              }

              <p className="error">{errors.state?.message}</p>

            </div>

            <div className="image_container">

              <div>Fotografía representativa del pueblo</div>

              <ImageDropzone setValue={setValue}/>

              <ImageDropzone setValue={setValue} setPreview={setPreview} preview={preview}/>

              <p className="error">{errors.imageURL?.message}</p>

              <input type="submit"/>

            </div>