Small issue with clusters

[diogogmatos]

Notice how this one pin won't join the cluster of the rest of the pins nearby? This happens because the <MarkerClusterGroup> can only have a list of markers (<Marker>) inside, which conflicts with the filter-by-type feature we created. So what ends up happening is that pins are grouped into clusters of their respective type only.
Putting all the pins inside a <MarkerClusterGroup> separately doesn't work because it duplicates the pins, only without putting them into Layer Groups. How could we solve this?

This is how we're applying the MarkerClusterGroup currently:

function filterPins(pins: Pin[], { name, type, checked }: Filter) {
  return (
    <LayersControl.Overlay checked={checked} name={name}>
      <LayerGroup>
        <MarkerClusterGroup
          iconCreateFunction={createClusterCustomIcon}
          showCoverageOnHover={false}
        >
          {pins
            .filter((pin: Pin) => pin.type === type)
            .map((pin: Pin) => (
              <Marker key={`${pin.coordinates}-${pin.author}`} {...pin} />
            ))}
        </MarkerClusterGroup>
      </LayerGroup>
    </LayersControl.Overlay>
  );
}