Ошибка при попытке сопоставить хороплет с помощью react-leaflet-choropleth: невозможно прочитать свойство «карта» неопределенного

Я пытаюсь сделать хороплет в react, используя react-leaflet-choropleth.

У меня листовка работает нормально.
Теперь, когда я пытаюсь загрузить geojson (crimes_by_district) с помощью библиотеки, я получаю сообщение об ошибке при сопоставлении функций, а именно:

Cannot read property 'map' of undefined

Кажется, я не точно ссылаюсь на правильный массив для сопоставления.

Я просмотрел проблемы в репозитории git и безуспешно пробовал предложения. Мне интересно, возможно, я ссылаюсь на неправильные значения из geoJson, которые я использую.

Ниже мой код:

Leaf.js (отображается в App.js)

import React, { Component } from 'react';
import { Map, TileLayer } from 'react-leaflet';
import classes from './leaf.module.css'
import Choropleth from 'react-leaflet-choropleth'
import geojson from "./assets/crimes_by_district.geojson";
    
const style = {
   fillColor: '#F28F3B',
   weight: 2,
   opacity: 1,
   color: 'white',
   dashArray: '3',
   fillOpacity: 0.5
};
    
class Leaf extends Component {
   render() { 
      return (         
         <Map>
           <Choropleth
             data= {{type: 'FeatureCollection', features: geojson.features}}
             valueProperty = {(feature) => feature.properties.value}
             // visible = {(feature) => feature.id !== active.id}
             scale = {['#b3cde0', '#011f4b']}
             steps = {7}
             mode='e'
             style = {style}
             onEachFeature = {
               (feature, layer) => layer.bindPopup(feature.properties.label)
             }
             ref = {(el) => this.choropleth = el.leafletElement}
           />
         </Map>
      );
   }
}
    
export default Leaf;