How to 'Indeterminate' checkboxs?

Hello I want to know how to apply "Indeterminate" to my code Checkbox example:

I know the documentation is right there but I wasn't able to make it work this was my attempt and I would say I was close but clearly missing something very important

The idea is that when I click the "parent" one all of them get clicked, all of them changed to checked and all of them send the data to a variable and when I unclick they should remove it, and when I remove one in particular it should only remove that one in particular (that one is already working but idk if I have to add something else for the parent)

Individually they do what I want but I wanted to add the parent/main one so I can just check all of them:

This is my code:

//Functions

//set all students attempt
const [allStudentsID, setAllStudentsID] = useState();
const setAllStudents = () => {
  setAllStudentsID(Array.isArray(estudiantes)?estudiantes.map(x=> x.label):[]);
  console.log(allStudentsID)
}


//set individual one by one (works)
const [studentID, setStudentID] = useState([])
const setStudent = (estudiante) => {
  if(!studentID.find(id => id === estudiante)){
    setStudentID([ ... studentID, estudiante]); 
 }  
  else {
   setStudentID(studentID.filter(studentId => studentId !== estudiante)) 
   }  

   console.log(studentID)
}

Mapping/Render:

//Titles (not sure if I'm setting up correctly the checkbox)
                <thead>
                    <tr className="Lista">
                        <th ><Checkbox 
                              color = "primary" 
                              id = "checkBox" 
                              onChange = {() => setAllStudents()}
                              />
                        </th>
                        <th>Nombre</th>
                        <th>Colegio</th>
                        <th>Grado</th>
                        <th>Accion</th>
                    </tr>
                </thead>

//Table (this works)
{estudiantes.map((estudiantes, index) => (
                <tr key={estudiantes.id || index}>
                <td>
                <Checkbox
                checked={!!studentID.find( id => id === estudiantes.uid)}
                color = "primary"
                id = "checkBox"
                onChange = {() => setStudent(estudiantes.uid, index)}
                inputProps=aria-label
                />
                </td>

... some code that will finish the table