leaflet ピンをクラスター表示にしたい

前提・実現したいこと

クラスター表示はされていて、数もあっていますが、立っているピンがクラスターになりません。
クリックをしてピンが立ち、数が多くなればピンもクラスターになってほしいのですが、ピンが常に立っている状態です。
分かる方、教えて頂きたいです。

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5<meta charset="UTF-8">
6<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" />
7<script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
8<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
9<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
10<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
11</head>
12
13<body onload="init()">
14<div id="mapcontainer" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;"></div>
15<div class="main" style="position: absolute; z-index:500; background-color: white; height: 200px;">
16<h2>メニュー</h2>
17<ul>
18<li>
19<div>
20<input type="checkbox" onclick="tokyo()">東京
21</div>
22</li>
23</ul>
24</div>
25
26<script>
27
28var map = L.map('mapcontainer', {
29zoomControl: false
30});
31
32var osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png', {
33attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
34});
35
36function init() {
37osm.addTo(map);
38var mpoint = [35.681236, 139.767125];
39map.setView(mpoint, 10);
40}
41var markers = L.markerClusterGroup();
42function tokyo() {
43marker = L.marker([35.658182, 139.702043]).bindPopup("サンプル").addTo(map);
44    markers.addLayer(marker);
45    map.addLayer(markers);
46}
47
48</script>
49</body>
50</html>