Filter Leaflet Maps using multiple DropDownLists in Blazor

i have tried this but after loading the maps its not filtering them. that is after selection of the region its not the markers disapear.

Razor page

 i have this table with dropdown

<table>
    <tr>
        @if (@_details.portee == "N")
        {
            <td>
                Region :  <select id="_code_region" value="@_code_region" @onchange=@((ChangeEventArgs args)=> RegionChanged(args.Value.ToString()))>
                    <option value="">Select</option>
                    @foreach (var reg in _datarg)
                    {
                        <option value="@reg.code_region">@reg.region</option>
                    }
                </select>
            </td>
        }
        else
        {
            <td>Region : @_details.region</td>
        }
        <td>
            Cercle :  <select id="_code_cercle" value="@_code_cercle" @onchange=@((ChangeEventArgs args)=> CercleChanged(args.Value.ToString()))>
                <option>Select</option>
                @foreach (var reg in _datacrle)
                {
                    <option value="@reg.code_cercle">@reg.cercle</option>
                }
            </select>
        </td>
        <td>
        Commune :  <select id="_commune" value="@_commune" @onchange=@((ChangeEventArgs args)=> CommuneChanged(args.Value.ToString()))>
                <option>Select</option>
                @foreach (var reg in _datacommune)
                {
                    <option value="@reg.code_commune">@reg.commune</option>
                }
            </select>
        </td>
        <td>
            Village :  <select id="department" value="@_code_village" @onchange=@((ChangeEventArgs args)=> VillageChanged(args.Value.ToString()))>
                <option>Select</option>
                @foreach (var reg in _datavillage)
                {
                    <option value="@reg.code_village">@reg.village</option>
                }
            </select>
        </td>
        <td>
            Afficher uniquement les données non approuvées :<br />
            @if (_checkbox)
            {
                <label class="switch">
                    <input type="checkbox" @onchange=@((ChangeEventArgs args)=> checkboxChanged(bool.Parse(args.Value.ToString())))>
                    <span class="slider round"></span>
                </label>
            }
        </td>
    </tr>
</table>

on c# partial class i have this code:

C# partial class

string? _commune;
string? _code_region = "";
string? _code_cercle;

protected async Task RegionChanged(string code_region)
{
    try
    {
        _datastation = new();
        _datadepot = new();
        _dataliuepublic = new();
        _datafdal = new();
        _code_region = code_region;
        _checkbox = true;
        _finishedLoadingData = false;
        _datacrle = new();
        _datacommune = new();
        _datavillage = new();
        _datacrle = await Controller.DataFilter.Getcercle(_code_region);
        mapData = await FetchLieMapDataAsync();
        await InitializeMap();
        await FilterMarkers();
        await varcount();
        _finishedLoadingData = true;
    }
    catch (Exception ex)
    {
        toastService.ShowToast(ex.Message, ToastLevel.Error);
    }
}
protected async Task CercleChanged(string code_cercle)
{
    try
    {
        _code_cercle = code_cercle;
        _checkbox = true;
        _finishedLoadingData = false;
        _datacommune = new();
        _datavillage = new();
        _datacommune = await Controller.DataFilter.Getcommune(_code_cercle);
        await FilterMarkers();


        await checkboxChanged(_checkboxnull);

        _finishedLoadingData = true;


    }
    catch (Exception ex)
    {
        toastService.ShowToast(ex.Message, ToastLevel.Error);
    }
}
protected async Task CommuneChanged(string commune)
{
    try
    {
        _commune = commune;
        _finishedLoadingData = false;
        _datavillage = new();
        _datavillage = await Controller.DataFilter.GetVillage(_commune);
        await FilterMarkers();

        await checkboxChanged(_checkboxnull);

        _finishedLoadingData = true;

    }
    catch (Exception ex)
    {
        toastService.ShowToast(ex.Message, ToastLevel.Error);
    }
}
protected async Task CvillageChanged(String commune)
{
    try
    {
        _finishedLoadingData = false;

        _dataVillage = await Controller.DataFilter.GetVillage(commune);

        _finishedLoadingData = true;
    }
    catch (Exception ex)
    {
        toastService.ShowToast(ex.Message, ToastLevel.Error);
    }

}

private async Task<List<vm_lieu_public>> FetchLieMapDataAsync()
{
    List<vm_lieu_public> mapData = new List<vm_lieu_public>();
    try
    {

        string conString = DataFilter.ConnectionString;
        using (SqlConnection con = new SqlConnection(conString))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT * FROM vm_lieu_public ", con))
            {
                con.Open();

                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        mapData.Add(new vm_lieu_public
                        {
                            nom_lieu_public = sdr["nom_lieu_public"].ToString(),
                            latitude = Convert.ToDecimal(sdr["latitude"]),
                            longitude = Convert.ToDecimal(sdr["longitude"]),
                            nom_village = sdr["nom_village"].ToString(),
                            code_region = sdr["code_region"].ToString(),
                            code_cercle = sdr["code_cercle"].ToString(),
                            code_commune = sdr["code_commune"].ToString()

                        });
                    }
                }
                con.Close();
            }

        }
    }
    catch (Exception ex)
    {
        // Handle exception
    }

    return mapData;
}

private async Task InitializeMap()
{
    await jsruntime.InvokeVoidAsync("initializeMap", mapData);
}

private async Task FilterMarkers()
{
    await jsruntime.InvokeVoidAsync("filterMarkers", _code_region, _code_cercle, _commune, _code_village, mapData);
}

JavaScript

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
    let map; // Declare map variable
    let markers = []; // Array to store markers
 
    // Function to initialize or update the map
    function initializeMap(mapData) {
        var container = L.DomUtil.get('map_3');
        if (container != null) {
            container._leaflet_id = null;
        }
 
        map = L.map('map_3').setView([13.28525, -7.57181], 7);
 
        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        markers = []; // Clear existing markers
        mapData.forEach((data) => {
            const marker = L.marker([data.latitude, data.longitude]).addTo(map);
            marker.bindPopup(`Nom Lieu Public: ${data.nom_lieu_public}<br>Latitude: ${data.latitude}<br>Longitude: ${data.longitude}<br>Nom Village: ${data.nom_village}`).openPopup();
            markers.push(marker);
        });
    }
 
    // Function to filter markers based on selected values
    function filterMarkers(region, cercle, commune, village, mapData) {
        // Clear existing markers
        markers.forEach(marker => map.removeLayer(marker));
 
        // Filter mapData based on selected values
        const filteredData = mapData.filter(data =>
            (!region || data.Region === region) &&
            (!cercle || data.Cercle === cercle) &&
            (!commune || data.Commune === commune) &&
            (!village || data.Village === village)
        );
 
        // Add filtered markers to the map
        filteredData.forEach(data => {
            const marker = L.marker([data.latitude, data.longitude]).addTo(map);
            marker.bindPopup(`Nom Lieu Public: ${data.nom_lieu_public}<br>Latitude: ${data.latitude}<br>Longitude: ${data.longitude}<br>Nom Village: ${data.nom_village}`).openPopup();
            markers.push(marker);
        });
    }
//  window.initializeMap(mapData);
</script>