axios does not return an array ReactJS

I'm taking axios to get a json server with an array

attached json array

http://my-json-server.typicode.com/jee4nc/myjsonserver/lista

The problem is that I want to assign that list of objects to another component through its properties

import React, { Component } from 'react';
import axios from 'axios';
import CardsGrid from "../Pages/CardsGrid"

class Axios_cards extends Component {

    constructor(props) {

        super(props)
        this.state = {
            courses : []
        }      
    }

    componentDidMount() {
        axios.get('http://my-json-server.typicode.com/jee4nc/myjsonserver/lista')
        .then(response => this.setState({
                courses: response.data
            }))
    }
    render() {
        const {courses} = this.state
        return <CardsGrid courses={courses}/
    }
}

export default Axios_cards;

Exactly here

render() {
        const {courses} = this.state
        return <CardsGrid courses={courses}/>
    }

The component that receives the list of objects as props, is not receiving the array, since I did a validation to verify it I attach the component to which I assign the array through props

const CardsGrid = ({courses}) => (
    <div className="ed-grid m-grid-3">
            {
                Array.isArray(courses) ?
            courses.map( e => 
                <Cards 
                id={e.id} 
                title={e.title} 
                description={e.description}
                image={e.image}
                price={e.price}
                key={e.id}  
                />) : null
            }
        </div>
)