Reactjs firefox和safari中的传单慢拖问题

我面临的问题是，我有一些图标，我应该在我的地图上显示，用户可以与它们交互，它们是

svg

文件，我在某处读到问题是由

svgs

引起的，以及

firefox

在呈现它们时如何出现问题，所以我用css创建了这些图标，我仍然面临这个问题，有什么解决办法吗？ 我显示地图的方式如下：

                    <LeafletMap
                        center={[this.state.mapLat, this.state.mapLng,]}
                        zoom={17}
                        maxZoom={20}
                        attributionControl={true}
                        zoomControl={false}
                        doubleClickZoom={true}
                        scrollWheelZoom={true}
                        dragging={true}
                        animate={true}
                        easeLinearity={0.35}
                    >
                        <TileLayer
                            url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                        />
                        {markers.map(item =>
                            <Marker position={[item.lat, item.lng]} className="heyyya" icon={L.divIcon({
                                className: 'marker',
                                html: `
                                <div class="map-icon" id=${item.id}>
                                    <div class="circle">
                                        <div class="inner-circle">${item.free_count}</div>
                                    </div>
                                </div>
                                
                            `,
                                iconSize: [40, 40],
                                iconAnchor: [24, 24]
                            })} title={item.free_count} key={item.id} id={item.id} onClick={goToPlace}>

                            </Marker>
                            

                        )}


                    </LeafletMap >

{markers.map（项=>
)}