removing previous marker before adding new marker in Mapbox

I have below code to display markers in the place when the map loads via GeoJson data. It's working perfectly and the thing is I want to remove the previous map markers when adding new markers. Where I should make changes to work perfectly.

Here is the complete function

prepareGeoJsonData(data) {
    let features = [];
    let counter = 0;

    for (let val of data) {
      features.push({
        type: "Feature",
        geometry: val.address.geometry.border,
        center: val.address.geometry.center,
        properties: {
          center: val.address.geometry.center.coordinates,
          landUnitId: val.memberOf.parcel[0]
        },
        id: counter++,
      });
      //
code for marker customization
//
        let marker = new mapboxgl.Marker(el)
          .setLngLat(cords)
          // .setPopup(popup)
          .addTo(this._mapRef);
        this.markers.push(marker);
      }
    };
    return {
      type: "FeatureCollection",
      features: features
    };
  }

Current Flow:

Page Loads -> Map Loads -> Markers Appear -> Apply filters -> New Markers Added -> Previous Markers Still Present

Required Flow:

Page Loads -> Map Loads -> Markers Appear -> Apply filters -> New Markers Added -> Previous Markers Disappear