Lealet – Cluster geojson Layer doesn’t work with marker filtering

I’m doing a leaflet map with some GEOjson data.
I try to add the cluster function to my js file. As I added some filter and styling features according to properties, I’m unable to find the right way to code the cluster fonction.

Here is the Geosjson layer and the filter verificator:

const geojsonLayer = L.geoJSON(null,{
filter: (feature) => {
const isYearChecked = checkboxStates.years.includes(feature.properties.year)
const isEventTypeChecked = checkboxStates.eventTypes.includes(feature.properties.eventType)
return isYearChecked && isEventTypeChecked }, //only true if both are true

with the syling function:

              var year = feature.properties.year;
              if (year <= -150) {
                  return {
                      color: "black"
                  };

I add then the popup:

layer.bindPopup(popupText, {
       closeButton: true,
       offset: L.point(0, -10)
          });
     layer.on('click', function() {
       layer.openPopup();
     });
   },
}).addTo(map);

I try to add this piece of code to display the cluster but I don’t know where to place it in my code in order to work (https://github.com/Leaflet/Leaflet.markercluster):

var markers = L.markerClusterGroup();
markers.addLayer(L.marker(getRandomLatLng(map)));
... Add more layers ...
map.addLayer(markers);

My whole code is available here: https://github.com/jandre3/pince-crochet

Thank you for your advices. Sorry if the question is very easy, I’m new in JS.