Error with esri-leaflet and esri-leaflet-geocoder

Question

I need help getting the esri geocode services to work. The leaflet map and the vectorBasemapLayer are working fine but when I try to add esri-leaflet and the esri-leaflet-geocoder I keep the screen go white and I get the type error, "TypeError: can't access property "Geocoding", L.esri is undefined". and I am getting this error. "Argument of type '{ apikey: string; nearby: { lat: number; lng: number; }; }' is not assignable to parameter of type 'ArcgisOnlineProviderOptions'. Object literal may only specify known properties, and 'apikey' does not exist in type 'ArcgisOnlineProviderOptions'"

Here is the code:

const apiKey =
  "API_KEY";

const basemapEnum = "arcgis/navigation";

import { CapacitorHttp } from "@capacitor/core";
import { vectorBasemapLayer } from "esri-leaflet-vector";
import * as L from "leaflet";
import * as esri from "esri-leaflet";
import * as EsriGeocoder from "esri-leaflet-geocoder";


export const init = (mapView: HTMLDivElement) => {
  const map = L.map(mapView, {
    minZoom: 5,
  });
  map.setView([34.02, -118.805], 13);
  vectorBasemapLayer(basemapEnum, { apiKey }).addTo(map);

  const searchControl = L.esri.Geocoding.geosearch({
    position: "topright",
    placeholder: "Enter an address or place e.g. 1 York St",
    useMapBounds: false,
   providers: [
      L.esri.Geocoding.arcgisOnlineProvider({
        apikey: apiKey,
        nearby: {
          lat: -33.8688,
          lng: 151.2093
        }
      })
    ]
  }).addTo(map);


  

  return map;
};

I followed to official documentation and I know the Api key is working because it is rendering Leaflet with the vectorBasemapLayer from Esri.