JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
<head>
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
	<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />
	<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
</head>
<body>
	<div id="map" style="width:500px;height:500px;"></div>
	<script type="text/javascript">
		var map = new L.Map('map', {
			zoomSnap: 0,
			zoomDelta: 1,
			wheelPxPerZoomLevel: 100
		});
		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			maxZoom: 18
		}).addTo(map);
		var markers = new L.MarkerClusterGroup({
			showCoverageOnHover: false,
			zoomToBoundsOnClick: false,
			spiderfyDistanceMultiplier: 6,
			clusterPane: "clusterPane",
			iconCreateFunction: function(c){
				let nodes = c.getAllChildMarkers();
				c.options.tooltipAnchor = L.point(0,0);
				let text = nodes.length > 2 ? "test<br>test" : "alsdkjfaks;dljfal;ksdfj";
				// >>>>>>>>>>>>>>>>>>>>>>>>>>>
				// c.unbindTooltip();
				c.bindTooltip(text, {
					permanent: true,
					direction: "right",
					offset: [17,0],
					interactive: true
				});
				return new L.DivIcon({
					html: "<div>"+c.getChildCount()+"</div>",
					iconSize: [42, 42]
				});
			}
		});
		markers.addTo(map);
		map.fitWorld();
		
		let p = [
			L.marker([39.28542,-76.60682]),
			L.marker([39.28542,-76.60682]),
			L.marker([39.28542,-76.60682])
		];
		// add some markers
		setTimeout(function(){
			markers.addLayers(p);
		}, 250);
		// remove some
		setTimeout(function(){
			markers.removeLayers([p[0]]);
		}, 500);
	</script>
</body>
</html>