remove/add array of L.photo.cluster()

I'm developing a web app using leaflet. I've created toggle button to switch between photos and markers on the map but I can remove only last uploaded photo from map and the others are still in.
This is my button code:

// global variables used in toggle button
markers = new L.MarkerClusterGroup();
var markerGroup = new L.layerGroup();
var photoLayer = new L.layerGroup();

var toggle = L.easyButton({
  states: [{
    stateName: 'add-markers',
    icon: 'fa-map-marker',
    title: 'add random markers',
    onClick: function(control) {
        map.removeLayer(photoLayer);
        map.addLayer(markerGroup);
        control.state('remove-markers');
    }
  }, {
    icon: 'fa-camera',
    stateName: 'remove-markers',
    onClick: function(control) {
      map.removeLayer(markerGroup);
      map.addLayer(photoLayer);
      control.state('add-markers');
    },
    title: 'remove markers'
  }]
});
toggle.addTo(map);

and then I have a function where I'm initialazing my variables:

photoLayer = L.photo.cluster( {spiderfyDistanceMultiplier: 1.2 }).on('click', function (evt){
                evt.layer.bindPopup(L.Util.template('<img src="' + path + '" width="200" height="200" /></a><p>' + last + '</p>', evt.layer.photo),{
                    className: 'leaflet-popup-photo',
                    minWidth: 80
                }).openPopup();
    });
    photos;
    photos.push({
                    lat: map_lat, // longitude
                    lng: map_lon, // latitude
                    thumbnail: path // path to my photo
                            });
photoLayer.add(photos).addTo(map);

var newMarker = L.marker([map_lat, map_lon]);
markerGroup.addLayer( newMarker );

Could you give me advice how to store all photos in photoLayer to remove/show them like markerGroup, please?