Estoy tratando de agregar un botón o casilla de verificación que me permita seleccionar/deseleccionar todas las demás casillas de verificación para mi filtro. He intentado algunas formas clásicas de Javascript al obtener todos los elementos por métodos de nombre de clase, pero hasta ahora no he tenido éxito. Cualquier ayuda sería muy apreciada. A continuación se muestra mi archivo jsx.

 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={{ display: "none" }} ></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; '''