TypeScript Problem with Adding New Property to react-leaflet Marker Component

Question

I am trying to pass an additional property count into the Marker component provided by react-leaflet .

However, we are getting an error

Type '{ children: Element; position: [number, number]; key: number; count: number; }' is not assignable to type 'IntrinsicAttributes & MarkerProps & RefAttributes<Marker<any>>'.
  Property 'count' does not exist on type 'IntrinsicAttributes & MarkerProps & RefAttributes<Marker<any>>'.  TS2322

Is there a way to solve this? Is it possible to extend the current TS interface of Marker ?

React/TS Code:

interface IMarker {
    lat: number;
    lon: number;
    count: number;
}

interface IProps {
    data: IMarker[];
}

const createClusterIcon = (cluster: any) => {
    const childMarkers = cluster.getAllChildMarkers();
    let childCount = 0;
    childMarkers.forEach((m:IMarker) => {
        childCount = childCount + m.options.count;
    });

    return L.divIcon({
        html: `<div><span>${childCount}</span></div>`,
        className: 'marker-cluster-small',
        iconSize: new L.Point(40, 40)
    })
}

export function MapView({data}: IProps): JSX.Element {
    // Combine markers in `data` array
    let markers = [];
    for (var i = 0; i < data.length; i++) {
        markers.push(...data[i]);
    }

    return (
        <MapContainer>
            <MarkerClusterGroup iconCreateFunction={createClusterIcon}>
                {
                    markers.map((marker, index) => (
                        <Marker 
                            position={[marker.lat, marker.lon]} 
                            key={index}
                            count={ marker.count }
                        />
                }
            </MarkerClusterGroup>  
        </MapContainer>  
    )
}

Answer 1

You can create your " own " Marker component using method exported from the core package.
Check the implementation of the Marker component.
In other words copy the implementation of the Marker react component and change it.
For example this way:

export interface CustomMarkerProps extends MarkerOptions, EventedProps {
  children?: ReactNode;
  position: LatLngExpression;
  // custom object to be associated with a leaflet's marker
  customAttr: Object;
}

export const CustomMarker = createLayerComponent<LeafletMarker, CustomMarkerProps>(
  function createMarker({ customAttr, position, ...options }, ctx) {
    const instance = new LeafletMarker(position, options);
    // add customAttr to the leaflet's instance (leaflet, not the react wrapper)
    instance.customAttr = customAttr;
    return { instance, context: { ...ctx, overlayContainer: instance } };
  },
  function updateMarker(marker, props, prevProps) {
    // same as in the react-leaflet
  }
);

Later on you can access the leaflet's instance and retrive your customAttr.