Add chech/uncheck all to filter control checkbox input

I am trying to add a button or checkbox that would allow me to select/deselect all other checkboxes for my filter. I have tried some classic Javascript ways by doing get all elements by classname methods but have not been successful so far. Any help would be greatly appreciated. Below is my jsx file.

export const system = ['1','2','3'];


const FilterControl = ({ filters , setFilters }) =>{
    
    return (
        <div
        className="leaflet-filter-control leaflet-control-layers leaflet-control-layers-expanded leaflet-control"
        aria-haspopup="true"
      >
        <section className="leaflet-control-layers-list">
        <div className="leaflet-control-layers-base"></div>
        <div
          className="leaflet-control-layers-separator"
          style=
        ></div>
        <div className="leaflet-control-layers-overlays">
          <h3>Sensor System</h3>
         
          {system.map((type) => (
            <label>
              <div >
                <input
                  
                  id={type}
                  type="checkbox"
                  className="leaflet-control-layers-selector"
                  checked={filters.system.includes(type)}
                  onClick={(e) => {
                    if (filters.system.includes(type)) {
                      setFilters((prevFilters) => ({
                        ...prevFilters,
                        system: prevFilters.system.filter(
                          (f) => f !== type
                        )
                      }));
                    } else {
                      setFilters((prevFilters) => ({
                        ...prevFilters,
                        system: [...prevFilters.system, type]
                      }));
                    }
                  }}
                />
                
      
                <span>{type}</span>
              </div>
            </label>
            
          ))}

      
           
          </div>
      </section>
    </div>
  );
};





export default FilterControl;
'''