Значок пользовательского маркера не работает

Я использую реактивную листовку и хочу создать собственный значок маркера. React-leaflet может принимать объект Leaflet.Icon для отображения пользовательского значка маркера. Итак, я NPM установил листовку и добавил import { L } from 'leaflet';.

Затем я добавил:

const FPIcon = L.Icon.extend({
  options: {
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76]
  }
});

const purpleIcon = new FPIcon({
          iconUrl: '%PUBLIC_URL%/markers/Bar-Marker.png'
        });

к моему методу рендеринга.

Но я продолжаю получать следующую ошибку Cannot read property 'Icon' of undefined.

Чтобы создать собственный значок маркера, я также пробовал следующее:

const purpleIcon = L.icon({
    iconUrl: '%PUBLIC_URL%/markers/Bar-Marker.png',
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76]
});

но снова получил Cannot read property 'icon' of undefined ошибку.

Есть идеи о том, что я делаю неправильно?