Marker(Canvas icons) disappears when zoomed in and dragging on the react leaflet map

Question

When I am zoom in and then drag canvas icons on react-leaflet map, so that time others canvas icons disappears but when I zoom in or out again all the canvas icons appears properly.

Before the zooming in and without dragging, please refer to the to the Before Zoom image. After the zooming in and dragging, please refer to the to the 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}
            />                
        <CustomerDataGeoJSONLayer isAccountMarkerDraggingInProgress=isAccountMarkerDraggingInProgress}>                                   
            </CustomerDataGeoJSONLayer>
            <ZoomControl position="bottomright"></ZoomControl>
      </MapContainer>
    </>
       )
};


From CustomerDataGeoJSONLayer.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 CustomerDataGeoJSONLayer = (props) => {

const onCustomerDragStart = (e) => {
        if (!props.isAccountMarkerDraggingInProgress.current)
            props.isAccountMarkerDraggingInProgress.current = true;
    }
    
const CustomerMarkerDragEnd = (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', CustomerMarkerDragEnd);
                accountMarker.on('click', CustomerMarkerClicked);
                accountMarker.on('dragstart', onCustomerDragStart);
                return accountMarker;
            }
            else if (feature.properties.parameters.employeeId === ' ') {
                let empId = feature.properties.parameters.employeeId;
                let color = "red";
                if (empId === "")
                    color = "red";
                let accountMarker = renderNewCustomerMarker(feature, latlng, color);
                accountMarker.on('dragend', CustomerMarkerDragEnd);
                accountMarker.on('click', CustomerMarkerClicked);
                accountMarker.on('dragstart', onCustomerDragStart);
                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', CustomerMarkerDragEnd);
                accountMarker.on('click', CustomerMarkerClicked);
                accountMarker.on('dragstart', onCustomerDragStart);
                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 to the All Time image.

All Time