Se crea el custom hook utilizado para llamar a los métodos de obtener todos...

import { useEffect, useState } from "react";

import { TownDatasourceProd } from "../data/datasources/prod/town_datasource"

import { TownRepositoryProd } from "../data/repositories/prod/town_repository";

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

import { SubmitHandler, useForm } from "react-hook-form";

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

const townDatasource = new TownDatasourceProd();

const townRepository = new TownRepositoryProd(townDatasource);

export const useTownRegister = () => {

  const [statesList, setStatesList] = useState<State[] | null>(null);

  const {

    register,

    handleSubmit,

    setError,

    formState: {errors},

    setValue

  } = useForm<TownFormValues>();

  useEffect(() => {

    const getStates = async () => {

      const states = await townRepository.getStates();

      setStatesList(states);

    }

    getStates(); 

  }, []);

  const onSubmit: SubmitHandler<TownFormValues> = (data: TownFormValues) => {

    const fetch = async () => {

      try{

        await townRepository.registerTown(data);

      }catch(error: any){

      }

    }

    fetch();

  }

  return {statesList, register, handleSubmit, errors, onSubmit, setValue};

}

 No newline at end of file