Pass props to navigate for each element of an array with React Router Dom?

I'm trying to pass the props i have on the array.map function i'm using, since the array.map is creating buttons and each one of them navigates to the same screen, i just want to pass them the specific props of each position, like if they click on the button with the id 25 to give the navigate the info that position has, to show it on the next screen

The props look like below. They're on their own file and it's not the whole thing, but it literally has 30 ids so it's way too long and one id gets the idea across.

[
    {
        id: 1, 
        num_aula: '1', 
        horario_retiro: '2:00 ', 
        año: '1°', 
        division: '1°',
        estado: 'sucio',
    },
]

Here's what the code of the Component that's passing props looks like:

import React from "react";
import Button from 'react-bootstrap/Button';
import {aulas} from '../props/aulas';
import Container from 'react-bootstrap/Container';
import { Route, useNavigate } from "react-router-dom";

export default function AdministrarCurso_Portero(){
    const navigate= useNavigate();
    return(
        <Container> 
            <div className="row">
                {/* Acá hay botones que se generan en base a la cantidad de props que haya en el array map
                Que te redireccionan a la pantalla de Limpiar Curso, por ahora no le pasa los valores que tenga
                 */}
            {aulas.map((aula, i)  => (
                <div key={i} className="col-md-4">
                <Button onClick={()=> navigate('/LimpiarCurso',{state: {id:i,num_aula:num_aula,año:año,division:division,horario_retiro:horario_retiro}})}>{aula.año}{aula.division}</Button>
                </div>
            ))}
            </div>
        </Container>
    )
}

And the code from the Component that should receive the props to show them:

import React from "react";
import { View} from 'react-native';
import CheckCircle from '@mui/icons-material/CheckCircle'
import styles from '../../App';
import { GiBroom } from 'react-icons/gi';
import { Route, useLocation, useNavigate } from "react-router-dom";
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';

export default function LimpiarCurso(){
    const { state } = useLocation();
    const {num_aula, año, division, horario_retiro} = state;
    const navigate= useNavigate();
    return (
        <div>
        <Container>
            <Row>
                <Col></Col>
            </Row>
        </Container>
        <Container>
            <Row>
                <Col ><CheckCircle sx={{ fontSize: 200, color: 'white', backgroundColor:'green'}} style={{float: 'right'}}/></Col>
                <Col ><GiBroom size={200} style={{float: 'right'}}/></Col>
                            </Row>
        </Container>
        <Container>
            <Row>
                <Col ></Col>
                <Col><Button onClick={()=> navigate('/AdministrarCurso_Portero')}>Volver</Button></Col>                
                <Col ></Col>
            </Row>
        </Container>
        </div>
    )
}

Maybe there's an easy solution to this, but i haven't really grasped the use of array map or props yet.