Cannot read properties of undefined (reading 'map')

import {useDispatch, useSelector} from "react-redux";
import {cartoons_are_loaded} from "../redux/action_creators";
 
export let Cartoons = () => {
 
    let dispatch = useDispatch();
    let cartoons = useSelector(({cartoon_reducer: {cartoons}}) => cartoons);
 
    let fetchCartoons = async () => {
        try {
            let response = await fetch('https://api.sampleapis.com/cartoons/cartoons2D');
            let json = await response.json();
            console.log(json);
            dispatch(cartoons_are_loaded(json.data))
        } catch (e) {
            console.log(e)
        }
    }
 
    useEffect(() => {
       fetchCartoons();
    },[])
 
    return (<div>
        {cartoons.map(el => <div key={el.id}>{el.title}</div>)}
            </div>)
}

import {CARTOONS_ARE_LOADED} from "./action_types";
 
let initialState = {
    cartoons: []
}
 
let cartoon_reducer = (state = initialState, action) => {
    switch (action.type) {
        case CARTOONS_ARE_LOADED: {
            return {
                ...state,
                cartoons: action.payload
            }
        }
 
        default:
            return state;
    }
}
 
export default cartoon_reducer;

let CARTOONS_ARE_LOADED = 'CARTOONS_ARE_LOADED';
let ADD_FAVOURITE_CARTOON = 'ADD_FAVOURITE_MOVIE';
let DELETE_FAVOURITE_MOVIE = 'DELETE_FAVOURITE_MOVIE';
 
export {
    CARTOONS_ARE_LOADED,
    ADD_FAVOURITE_CARTOON,
    DELETE_FAVOURITE_MOVIE
}

import {
    CARTOONS_ARE_LOADED,
    ADD_FAVOURITE_CARTOON,
    DELETE_FAVOURITE_MOVIE
} from "./action_types";
 
let cartoons_are_loaded = (payload) => ({type : CARTOONS_ARE_LOADED, payload});
 
export {
    cartoons_are_loaded
}

import cartoon_reducer from "./reducers";
import {combineReducers} from "redux";
 
export let root_reducer = combineReducers({
    cartoon_reducer
})