I've been struggling to get map filters to work on my Leaflet map. I've got minimal JavaScript or Leaflet knowledge so where I have got to now has been a struggle. I'm essentially trying to do the following

https://jsfiddle.net/chrisjenner/jq1emofz/

I have tried to replicate this but without any joy. I'm sure it's fairly simple but with limited knowledge, I haven't been able to fix it. My version of the above can be found below where I am trying to filter a layer by a Boolean field. Carp and Tench are species and my sample dataset is for lakes. I want to be able to filter by these.

https://jsfiddle.net/chrisjenner/02crteao/64/

Below is my code
  

 

    <div class="input" id="carp">
          <input type="checkbox" class="carp" name="1" value="1" checked="true">
          <label for="1">Carp</label>
        </div>
    
        <div class="input" id="tench">
          <input type="checkbox" class="tench" name="1" value="1" checked="true">
          <label for="1">Tench</label>
        </div>
    
        const lakes = L.geoJSON(lakes_data, {
      style: function(feature) {
        return {
          color: feature.properties.color
        };
      }
      },
      {filter: (feature) => {
        const isCarpChecked = checkboxStates.carp.includes(feature.properties.carp)
        const isTenchChecked = checkboxStates.tench.includes(feature.properties.tench)
        return isCarpChecked && isTenchChecked //only true if both are true
      }
    }).bindPopup(function(layer) {
      return layer.feature.properties.name;
    }).addTo(map);
    
    function updateCheckboxStates() {
      checkboxStates = {
        carp: [],
        tench: []
      }
    
    for (let input of document.querySelectorAll('input')) {
        if (input.checked) {
          switch (input.className) {
            case 'carp':
              checkboxStates.carp.push(input.value);
              break
            case 'tench':
              checkboxStates.tench.push(input.value);
              break
          }
        }
      }
    }
    
    for (let input of document.querySelectorAll('input')) {
       input.onchange = (e) => {
        lakes.clearLayers()
        updateCheckboxStates()
        lakes.addData(lakes_data)
      }
    }
    
    updateCheckboxStates()
    lakes.addData(lakes_data)