Creé esta función que es un filtro con casillas de verificación. ¿Cómo puedo agregar la funcionalidad donde puede marcar todo/desmarcar todo a mi código existente, y también agregarle mecanografiado?

¡Se agradece mucho cualquier ayuda!

 function FilterCheckbox(props) { const wells = ["All","Legacy Wells", "Injection Wells", "Monitoring Wells"]; const [checkedWells, setCheckedWells] = useState([]); const wellsProps = { wells, checkedWells, setCheckedWells }; return ( <div> <CheckedWells {...wellsProps} /> </div> ); } function CheckedWells(props) { const handleChecked = e => { const well = props.wells[e.target.dataset.id]; let newCheckedWells = props.checkedWells.filter(item => item !== well); if (e.target.checked) newCheckedWells.push(well); props.setCheckedWells(newCheckedWells); }; return ( <div> {props.wells.map((well, id) => ( <label key={id}> <input type="checkbox" data-id={id} onClick={handleChecked} /> {well} </label> ))} <p>{props.checkedValues}</p> </div> ); } export default FilterCheckbox