How to parse data from checkboxSelection MUI to a variable? - reactjs

Question

I'm using DataGrid from MUI, it does have a checkbox function and I want to use it so that when I check it it adds the row data to a variable (the id, name, etc etc) so I can use it somewhere else with useLocation but it doesn't seem to be working ? I did a small test just to see if it was doing anything but it doesn't even show the console.log there's what I try:
.........
const [studentsID, setStudentsID] = useState([]);
function currentlySelected(estudiantes) {
setStudentsID(estudiantes)
console.log(studentsID)
}
...........
<DataGrid
rows={estudiantes}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
checkboxSelection
onSelectionChange={currentlySelected}
components={{
Toolbar: CustomToolbar,
}}
/>
All I want to do is to be able to send data to another page so I can work with the uid of the data and grab internal values such as (name, lastname) and that sort of thing let me know if you require anything else, any help/tips/documentation is welcome.
UPDATED This is my whole code in case you need it:
import React, { useState, useEffect, Fragment } from 'react'
import {db} from './firebase';
import { useHistory, useLocation } from 'react-router-dom';
import "./ListadoEstudiantes.css"
import * as locales from '#mui/material/locale';
import { DataGrid,
GridToolbarContainer,
GridToolbarColumnsButton,
GridToolbarFilterButton,
GridToolbarExport,
GridToolbarDensitySelector } from '#mui/x-data-grid';
import { Button, Container } from "#material-ui/core";
import PersonAddIcon from '#mui/icons-material/PersonAddSharp';
import { Box } from '#mui/system';
function ListadoEstudiantes({user}) {
const history = useHistory("");
const crearEstudiante = () => {
history.push("/Crear_Estudiante");
};
const [estudiantes, setEstudiantes] = useState([]);
const estudiantesRef = db.collection("usuarios").doc(user.uid).collection("estudiantes")
useEffect(() => {
estudiantesRef.onSnapshot(snapshot => {
const tempData = [];
snapshot.forEach((doc) => {
const data = doc.data();
tempData.push(data);
});
setEstudiantes(tempData);
})
}, []);
function CustomToolbar() {
return (
<GridToolbarContainer>
<GridToolbarFilterButton />
<GridToolbarDensitySelector />
</GridToolbarContainer>
);
}
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}
]
return (
<Container fixed>
<Box mb={5} pt={2} sx={{textAlign:'center'}}>
<Button
startIcon = {<PersonAddIcon />}
variant = "contained"
color = "primary"
size = "medium"
onClick={crearEstudiante} >
Crear Estudiantes
</Button>
<Box pl={25} pt={2} sx={{height: '390px', width: "800px", textAlign:'center'}}>
<DataGrid
rows={estudiantes}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
components={{
Toolbar: CustomToolbar,
}}
checkboxSelection
onSelectionModelChange={(id) => {
const selectedIDs = new Set(id);
const selectedRowData = estudiantes.filter((row) =>
selectedIDs.has(row.id.toString())
);
console.log(selectedRowData, selectedIDs );
}}
{...estudiantes}
/>
</Box></Box></Container>
)
}
export default ListadoEstudiantes
UPDATE No longers grants me an error but it doesn't seem to be saving the data