Se agrega un cargador que indica que se esta buscando la direccion

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

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

import { UseFormClearErrors, UseFormSetValue } from "react-hook-form";

import { Place } from "../../infraestructure/entities/place";

import Map, { Marker, useMap } from "react-map-gl";

import "mapbox-gl/dist/mapbox-gl.css";

import { LoadingSpinner } from "../loading_spinner/loading_spinner";

interface props {

  setValue: UseFormSetValue<Place>;

  setIsLoading: Dispatch<SetStateAction<boolean>>;

  isLoading: boolean;

  clearErrors: UseFormClearErrors<Place>;

  position: Position | null;

  setPosition: Dispatch<SetStateAction<Position | null>>;

export const MapBoxComponent = ({

  setValue,

  setIsLoading,

  isLoading,

  position,

  setPosition,

  clearErrors,

  return (

    <div style={{ width: "100%", height: "100%" }}>

      {isLoading && <LoadingSpinner />}

      <Map

        mapboxAccessToken={process.env.REACT_APP_MAP_BOX || ""}

        initialViewState={{

      >

        <PositionListener

          setValue={setValue}

          setIsLoading={setIsLoading}

          isLoading={isLoading}

          position={position}

          clearErrors={clearErrors}

          setPosition={setPosition}