When I am zoomed in and then dragging canvas icons on react-leaflet map so that time others canvas icons is disappears but when I am again zoomed in or out so again all the canvas icon appers properly.

Before the zoomed in and without dragging please refer Before Zoom image.
After the zoomed in and dragging please refer After Zoom image.

Before Zoom
After Zoom

Here is my code

From Map.tsx file 

import { MapContainer, TileLayer, useMapEvents, ZoomControl } from 'react-leaflet';

const Map = (props) => {
 return (
    <>
          <MapContainer id="map" ref={mapLayer} center={props.defaultPosition} zoom={props.zoom}                     
            referCanvas={false} zoomControl={false} scrollWheelZoom={false} closePopupOnClick={false} 
            attributionControl={false}>                
            <TileLayer
                url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
                id="mapbox/streets-v11" 
                accessToken="xxx"
                tileSize={512}
                zoomOffset={-1}
                maxZoom={18}
            />                
        <AccountDataGeoJSONLayer isAccountMarkerDraggingInProgress=isAccountMarkerDraggingInProgress}>                                   
            </AccountDataGeoJSONLayer>
            <ZoomControl position="bottomright"></ZoomControl>
      </MapContainer>
    </>
       )
};


From AccountDataGeoJSONLayer.tsx code 

import { GeoJSON, useMap } from 'react-leaflet';

const svgCircleMarker = {
    fillColor: 'orange',
    fillOpacity: 1,
    stroke: true,
    color: '#000',
    boostType: 'ball',
    boostScale: 2.0,
    boostExp: 0.25,
    weight: 3,
    draggable: true,
    worldCopyJump: false
};

const AccountDataGeoJSONLayer = (props) => {

const onAccountDragStart = (e) => {
        if (!props.isAccountMarkerDraggingInProgress.current)
            props.isAccountMarkerDraggingInProgress.current = true;
    }
    
const accountMarkerDragEnd = (e) => {
        if (props.isAccountMarkerDraggingInProgress.current)
            props.isAccountMarkerDraggingInProgress.current = false;
        const accountMarker = e.target;
        const newLatLng = accountMarker.getLatLng();
        accountMarker.setLatLng([accountMarker.feature.geometry.coordinates[1], accountMarker.feature.geometry.coordinates[0]]);
        if (props.isClusterActive) {
            props.setAccountMarkerDragEndData({ position: [newLatLng.lng, newLatLng.lat], feature: accountMarker.feature });
        }
    };
    
const renderDataForGeoJSONLayer = (feature, latlng) => {
        if (feature.properties.parameters.category === config.geoJSONPropertiesCategory.account) {
            if (props.accountUIConfig && props.accountUIConfig.accountMarkerConfig && props.accountUIConfig.accountMarkerConfig[feature.properties.parameters.employeeId] && props.accountUIConfig.accountMarkerConfig[feature.properties.parameters.employeeId].includes(MarkerUIComponent.SelectedMarker)) {
                let accountMarker = renderSelectedAccountMarker(feature, latlng, null);
                accountMarker.on('dragend', accountMarkerDragEnd);
                accountMarker.on('click', accountMarkerClicked);
                accountMarker.on('dragstart', onAccountDragStart);
                return accountMarker;
            }
            else if (feature.properties.parameters.employeeId === ' ') {
                let empId = feature.properties.parameters.employeeId;
                let color = "red";
                if (empId === "")
                    color = "red";
                let accountMarker = renderNewAccountMarker(feature, latlng, color);
                accountMarker.on('dragend', accountMarkerDragEnd);
                accountMarker.on('click', accountMarkerClicked);
                accountMarker.on('dragstart', onAccountDragStart);
                accountMarker.options.pmIgnore = true;
                return accountMarker;
            } else {
                let empId = feature.properties.parameters.employeeId;
                let color = Common.getColorFromString(empId + config.employeeRandomColorGeneratorString);
                if (empId === "")
                    color = "red";
                let accountMarker = renderAccountMarker(feature, latlng, color);
                accountMarker.on('dragend', accountMarkerDragEnd);
                accountMarker.on('click', accountMarkerClicked);
                accountMarker.on('dragstart', onAccountDragStart);
                accountMarker.options.pmIgnore = true;
                return accountMarker;
            }
        } else {
            return L.marker(latlng, { pmIgnore: true });
        }
    }

return (
        <GeoJSON ref={geoJSONRef} key={hash(Math.random())} data={props.accountGeoJSONData} pointToLayer={renderDataForGeoJSONLayer} pmIgnore={true}></GeoJSON>
    );
}

I want when user zoomed in and dragging canvas icon so that time all the icons appear proper.
Before and After zoomed in and dragging output is please refer All Time image.

All Time