How to parse data from firebase to MUI DataGrid?

I'm trying to learn how to parse data from firebase to MaterialTable because it looks way more clean than doing it "manually" with maps and <th> , <tr> but I haven't seen any tutorial that links MaterialTable + firebase. All tutorials so far show you can parse some manual data like this:

But not a single one with firebase included. any documentations/tips/help is welcome.

My code so far:

Data from firebase (working)

const [estudiantes, setEstudiantes] = useState([]);
const estudiantesRef = db.collection("usuarios").doc(user.uid).collection("estudiantes")

  useEffect(() => {
    estudiantesRef
    .orderBy('name')
     .onSnapshot(snapshot => {
       
        const tempData = [];
        snapshot.forEach((doc) => {

          const data = doc.data();
          tempData.push(data);

        });
        setEstudiantes(tempData);
      })
  }, []);

Columns (Working)

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },

  {field: 'nombre', headerName: 'Nombre', width: 200},

  {field: 'colegio', headerName: 'Colegio', width: 250},

  {field: 'grado', headerName: 'Grado', width: 150}
]

And how i'm "rendering" the table (Working)

return (
        <div className = "table_container" >
      <DataGrid
        rows={tempData}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
      />
    </div>
    )
}

export default ListadoEstudiantes

My data half attempt (I'm constantly trying stuff)

const [data, setData] = useState();

useEffect(() => {

  estudiantes.map((estudiantes, index) => ({
    setData(estudiantes[index])
  }))
}, [estudiantes])

that's giving me an error so far but I'll keep trying stuff until I get it. This is how I expect to make it look with the data from Firebase

Any tips/documentation/help is welcome

Well Apparently you don't have to do anything fancy I found out that as long as the variables names inside your doc(). match the ones you set up in your columns options

Set up in the code:

in the code you can see when I set up the values it matches with the names of the columns variables

const register = (e) => {
      e.preventDefault();
      const docRef = db.collection('usuarios').doc(user.uid).collection('estudiantes').doc();
      docRef.set({
        nombre: firstName + " " + lastName,
        colegio: escuela,
        grado: grado,
        uid: docRef.id,

      }).then((r) => {
          history.push("/Inicio");
      })
    }

How it should look in the firebase (still matching the columns)

Finally the result: