leafletでマーカーをcanvasで描画している時、マーカーサイズを動的に変更するとイベントの判定がおかしくなる

お世話になります。

leafletで表示させているマーカーでクリックするとポップアップが表示されます。
このマーカーはcanvasで描画していて、
サイズを動的に変更出来るようにしています。

サイズを動的に変更するとクリックイベントの範囲が実際の円よりも広い判定になってしまい、
困っております。
マーカーをDOMで描画している場合サイズを変更しても問題ありません。
canvasで描画しながらマーカーサイズを変更してもイベントの判定を円の範囲内にしたいのですが、方法はありますでしょうか。

以下コードを記載します。
そのままコピーペーストで動作します。

よろしくお願いいたします。

leaflet: 1.6.0

<!DOCTYPE html>
<html lang="ja" id="map-html">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Pragma" content="no-store">
<meta http-equiv="Cache-Control" content="no-store">
<meta http-equiv="Expires" content="0">
<title>title</title>
    <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css" rel="stylesheet">
<body>

<div id="optionmenu">
    <label>マーカーサイズ</label>
    <div><input id="marker_size" type="range" min="1" max="100"></div>
</div>

<div id="map" style="width: 100vw; height: 100vh;"></div>

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<script  type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet-src.js"></script>
<script type="text/javascript">

let map = null;

const marker = {
    marker_size : 8,
    marker_layer: {},
    letlng: [35, 139],
    set: function () {
        L.circleMarker(
            marker.letlng,
            {
                radius: this.marker_size,
                className: 'normal-marker',
                color: '#FF0000',
                renderer:  L.canvas()
            }
        ).on('click', function(e) {
            L.popup({
                closeButton: true,
                popupOpen: true,
                autoClose: false
            }).setLatLng(marker.letlng).setContent('test').openOn(map);

        }).addTo(this.marker_layer)
    },

    remove_marker: function() {
        this.marker_layer.clearLayers();
        this.marker_layer = L.layerGroup().addTo(map);
    },
    init: function() {
        this.marker_layer = L.layerGroup().addTo(map);
    }
}



window.onload = function() {
    L.DomUtil.create('div', 'leaflet-overlay', document.getElementById('map'));

    const baseGSI = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
        attribution: ' &copy; <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
        maxZoom: 18,
        minZoom: 0
    });

    map = new L.map('map', {
        center: ['35', '139'],
        zoom: 8,
        layers: [baseGSI],
        zoomControl: false,
        zoomAnimation: false,
        fadeAnimation: false,
        markerZoomAnimation: false,
    });
    L.control.zoom({
        position:'bottomright',
        zoomInTitle: 'ズームイン',
        zoomOutTitle: 'ズームアウト'
    }).addTo(map);

    $(".leaflet-control-attribution").eq(0).html('<a href="http://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>');

    $("#marker_size").on('change', function () {
        const val = $(this).val();

        marker.marker_size = val;

        marker.remove_marker();
        marker.set();
    })

    marker.init();
    marker.set();
};

</script>
</body>

</html>