How to parse data from firebase to MUI DataGrid?

Question

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