Реагировать на карту Lefleat Я не могу изменить classList CircleMarket без рендеринга карты

Question

У меня есть карта с circleMarkets, и я хочу изменить цвет круга Markets с помощью onClick и без рендеринга карты. Перед изменением цвета мне нужно отфильтровать circleMarkers, и с помощью этого фильтра я хочу изменить цвет круга CirkeMarket. Я попробовал дважды методы: 1 - с добавлением / удалением class.List: и у меня есть ошибка "Не удается прочитать свойство 'удалить' из неопределенного" 2 - прикрепить непосредственно к атрибуту stroken и заполнить: у меня есть ошибка "Не удается прочитать свойство"Штрих 'неопределенного "

COMPONENT MAP
import React, { useEffect, useRef } from "react";
import L from "leaflet";
import './map.css'
import RoomType from './RoomType'

function Map() {

    const apartments = [
        { roomType: 'shared room', geometry: [41.402610, 2.204270] },
        { roomType: 'shared room', geometry: [41.411300, 2.217630] },
        { roomType: 'private room', geometry: [41.410220, 2.212520] },
        { roomType: 'apartament sencer', geometry: [41.410630, 2.216970] },
        { roomType: 'private room', geometry: [41.409190, 2.209030] },
        { roomType: 'apartament sencer', geometry: [41.408110, 2.204500] },
    ]

    let map = useRef(null);

    useEffect(() => {
        let url = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}'
        const access = 'pk.eyJ1Ijoiam9zZXQyMSIsImEiOiJjazF1bGZlcHowYjVlM2RwYW9ia2pwaWtlIn0.9n-6tKArfdSfd15Do6YxLA'
        map.current = L.map("map");
        const defaultCenter = [41.383, 2.173];
        const defaultZoom = 13.10;

        let layer = L.tileLayer(url, {
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: access,
        });

        map.current.setView(defaultCenter, defaultZoom);
        layer.addTo(map.current);

        function setBasemap(basemap) {
            if (layer) {
                map.current.removeLayer(layer);
            }
            layer = L.tileLayer(url, {
                id: basemap,
                accessToken: access
            });
            map.current.addLayer(layer);
        }
        apartments.forEach(({ geometry }) => {
                let circle = new L.CircleMarker(geometry, {
                radius: 5,
                fillColor: "black",
                width: 0.5,
                stroke: "black",
                color: '#FFFFF',
                fillOpacity: 0.5,
                id: 'black',
                className: 'visibleall'
            }).addTo(map.current);
        });
    }, [map])
return (<>
    <div className="container">
        <div>
            <div id="map" className="normalscreen"></div>
        </div>
        <div id="basemaps-wrapper" className="leaflet-bar">
            <select id="basemaps">
                <option>Visualització</option>
                <option value="mapbox.streets">Streets</option>
                <option value="mapbox.satellite">Satellite</option>
                <option value="mapbox.outdoors">Outdoors</option>
                <option value="mapbox.dark">Dark</option>
                <option value="mapbox.light">Light</option>
                <option value="mapbox.DarkGray">Dark Gray</option>
            </select>
            <button onClick={onChangeFullScreen}>Full Screen</button>
            <RoomType />
        </div>
    </div>
</>)
}
export default Map

КОМНАТА КОМПОНЕНТОВ (круговые рынки)

import React from "react";
import './map.css'

function RoomType() {

    const apartments = [
        { roomType: 'shared room', geometry: [41.402610, 2.204270] },
        { roomType: 'shared room', geometry: [41.411300, 2.217630] },
        { roomType: 'private room', geometry: [41.410220, 2.212520] },
        { roomType: 'apartament sencer', geometry: [41.410630, 2.216970] },
        { roomType: 'private room', geometry: [41.409190, 2.209030] },
        { roomType: 'apartament sencer', geometry: [41.408110, 2.204500] },
    ]

    const handleOnclik = (e) => {
        e.preventDefault()

        let name = (e.target.name)

        let allApartments = document.querySelectorAll('.visibleall')
        if (name === 'filter') {

            if (allApartments.length > 0) {

                let filterApartment = apartments.filter((item) => {
                    if ((item.roomType !== 'private room') && (item.roomType !== 'shared room')) {
                        return item
                    }
                })
                filterApartment.forEach((item) => {
                    item.classList.remove('visibleall')
                    item.classList.add('visiblegreen')
                })

                let filterRoom = apartments.filter((item) => {
                    if (item.roomType === 'private room' || item.roomType === 'shared room') {
                        return item
                    }
                })
                filterRoom.forEach((item) => {
                    item.classList.remove('visibleall')
                    item.classList.add('visiblepink')
                })
            }
        } else {
            for (let i = 0; i < allApartments.length; i++) {
                item.classList.add('visiblepink')
                // allApartments[i].classList.remove('visiblepink')
                // allApartments[i].classList.remove('visiblegreen')
                // allApartments[i].classList.add('visibleall')
                allApartments[i].attributes.stroke.value = '#FFFFF'
                allApartments[i].attributes.fill.value = '#FFFFF'
            }
        }
    }

    return (<>
        <div>
            <img onClick={handleOnclik} name="alllicense" src="/images/icons/points.svg" width="5%" alt="llista apartaments" />
            <img onClick={handleOnclik} name="filter" src="/images/icons/filter-lic.svg" width="5%" alt="apartament sencer" />
        </div>
    </>)
}
export default RoomType

CSS

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  justify-content: center;
}

#map {
  display: block;
}

.normalscreen {
  width: 50%;
  height: 50vh;
  left: 49%;
  position: relative;
}

.fullscreen {
  width: 100%;
  height: 80vh;
  left: 0%;
  text-align: center;
}

.visiblepink {
  visibility: visible;
  color: '#ff1493';
  stroke: '#FF1493';
  fill: '#FF1493'
}

.visiblegreen {
  visibility: visible;
  color: '#ff1493';
  stroke: '#FF1493';
  fill: '#FF1493'
}

.visibleall {
  visibility: visible;
  stroke: 'black';
  fill: 'black';
}