Se incorpora la opcion de usar el api de mapbox

import { Category } from "../../../infraestructure/entities/category";

import { GeocodingGoogle } from "../../geocoding/geocoding_google";

import { APIProvider } from "@vis.gl/react-google-maps";

import { REACT_APP_GOOGLE_API_KEY } from "../../../constants/api_keys";

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

import { MapBoxComponent } from "../../map/map_mapbox";

interface props {

  setWindowVisibility: (visibility: boolean) => void;

                      return (

                        <div

                          className="category_item"

                          key={index}

                          onClick={() => onClickCategory(category.idCategory)}

                          style={

                            clickedCategories[index]

            <div className="map_container">

              <div className="google_map">

                <APIProvider apiKey={REACT_APP_GOOGLE_API_KEY}>

                {/* Asegúrate de crear el archivo de variables de entorno (.env) en el directorio raíz e 

                incluye la siguiente variable*/}

                {/*

                  USA LO SIGUIENTE SI DESEA USAR LOS MAPAS DE GOOGLE

                  <APIProvider

                  apiKey={process.env.REACT_APP_GOOGLE_API_KEY || ""}

                >

                  <GeocodingGoogle

                    getValues={getValues}

                    register={register}

                    />

                  </div>

                </APIProvider>

                  */}

                <MapBoxComponent

                  setValue={setValue}

                  setIsLoading={setIsLoading}

                  position={position}

                  setPosition={setPosition}

                  clearErrors={clearErrors}

                />

              </div>

              <div className="map_error_cnt">

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