How to navigate through a list

I want to render all the ‘name’ elements inside ‘rotas’, but when i try it says map is undefined. Maybe it’s a newbie question but i just can’t figure out how to do this, any help is apreciated.

export default function SelecionaRota(props) {
    const data = {
        locais: [
            {
                name: 'Rio de Janeiro',
                rotas: [
                    {
                        name: 'RJ-SP',
                        valor: 1200
                    },
                    {
                        name: 'RJ-BSB',
                        valor: 1400
                    }
                ]
            }
        ]
    }
    const location = useLocation()
    const { estadoOrigem } = location.state
    return (
        <div>
            <h1>{estadoOrigem}</h1>
            { rota.locais.rotas.map(module => (
                <h1>{module.nome}</h1>
            ))}
        </div>
    )
}