How to make a checkbox do different things based on their check status True/False

Alright I have a checkbox and when is checked it should save some value and when is unchecked it should delete the value of the one I just unchecked. From what I saw in Material UI: Checkbox there is an "easy way" in the "Controlled" section but it didn't work so I try something else but is not working neither aaand now I'm stuck. I saw a similar problem and tried that Stackoverflow: How to call 2 functions on onclick of a checkbox?. But apparently that didn't work neither because is from the regular checkbox but I want to use the checkbox from Material UI. This is what I have:

Relevant code

const [studentID, setStudentID] = useState([])
const setStudent = (estudiante) => {
  var checkBox = document.getElementById('checkBox');
     if(checkBox.ariaChecked == true){
         console.log("Save data")
         let data = studentID;
         data.push(estudiante);
         setStudentID(data);
         console.log(studentID)
      } 
       else{
         console.log("Delete data")
        }  
}

                <Checkbox  
                color = "primary"
                id = "checkBox"
                onChange = {() => setStudent(estudiante.uid)}
                inputProps=aria-label
                />

I try to adapt it from previous suggestions I saw from other posts but it didn't work it only goes through one option (I haven't create the code to delete the value just added a console.log)

if I invert them this is how it looks when I try to save data (this does works but since it only does one or the other it repeats)

Any tips, suggestions, documentation or help is very well appreciate it. Let me know if require something else.