cant access state, react redux

Question

I have a page with notes for a specific user, the problem is when i'm trying to access the state of 'my notes' i get 'undefined' on console, in postman, everything works when the user login, and I can see the notes.

notes reducer

import {
    NOTES_LIST_REQUEST,
    NOTES_LIST_SUCCESS,
    NOTES_LIST_FAIL,
} from '../types/noteTypes';

export const noteListReducer = (state = { notes: [] }, action) => {
    switch (action.type) {
        // whenever call the api its going to: 
        // request the notes 
        case NOTES_LIST_REQUEST:
            return { loading: true };
        // if true..
        case NOTES_LIST_SUCCESS:
            return { loading: false, notes: action.payload };
        //if fail..
        case NOTES_LIST_FAIL:
            return { loading: false, error: action.payload };
        default:
            return state;
    }
};

notes action

import {
    NOTES_LIST_REQUEST,
    NOTES_LIST_SUCCESS,
    NOTES_LIST_FAIL
} from '../types/noteTypes';
import axios from 'axios';

export const listNotes = () => async (dispatch, getState) => {
    try {
        // will set the loading to true 
        dispatch({ type: NOTES_LIST_REQUEST });

        // fetching the user info from the state
        const{
            userLogin: { userInfo },
        } = getState();

        //just like sending bearer token from postman to backend
        const options = {
            headers: {
                Authorization: `Bearer ${userInfo.token}`,
            },
        };

        const data = await axios('http://localhost:5000/api/notes', options); 
        console.log(data);
        // const returnDataFromServer = await data.json()
        // .then(dataa=>console.log(dataa))
        // console.log(returnDataFromServer);


        // if request is success dispatch this action and pass the data to the notes state inside the reducer
        dispatch({
            type: NOTES_LIST_SUCCESS,
            payload: data.data
        });

    } catch (err) {
        const message =
            err.response && err.response.returnDataFromServer.message
                ? err.response.returnDataFromServer.message
                : err.message;
        // if fails fire this action and pass the message                
        dispatch({
            type: NOTES_LIST_FAIL,
            payload: message,
        });
    }
};

notes page here I'm trying to access the state of 'my notes' but get undefined

import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import MainPage from '../../component/MainPage';
import { Badge, Button, Card, Accordion, AccordionCollapse, AccordionButton } from 'react-bootstrap';
import { useDispatch, useSelector } from 'react-redux';
import { listNotes } from '../../redux/actions/notesAction';
import Loading from '../../component/Loading';
import ErrorMessage from '../../component/ErrorMessage';

export default function MyNotes() {

    //take notes out from our state
    const dispatch = useDispatch();
    // name to the state
    const noteList = useSelector(state => state.noteList); 
    console.log(noteList);
    //destructing what we need from state 
    // const { loading, error, notes } = noteList;

    const deleteHandler = (id) => {
        if (window.confirm('Are You Sure?')) {
        }
    };

    useEffect(() => {
        dispatch(listNotes())
    }, [dispatch])


    // render the notes that come from the backend 
    return (
        <MainPage title="welcome back avi vovgen...">
            <Link to='createNewNot'>
                <Button className="btn btn-info" style={{ marginLeft: 10, marginBottom: 10 }} size="lg" >
                    Create new Note
                </Button>
            </Link>
{/* 
            {error && <ErrorMessage variant="danger">{error}</ErrorMessage>}
            {loading && <Loading />} */}
            {/* {notes.map((note) => (
                <Accordion key={note._id}>
                    <Card style={{ margin: 10 }}>
                        <Card.Header style={{ display: "flex" }}>
                            <span
                                style={{
                                    color: "black",
                                    textDecoration: "none",
                                    flex: 1,
                                    cursor: "pointer",
                                    alignSelf: "center",
                                    fontSize: 18
                                }}>
                                <AccordionButton as={Card.Text} variant="link" >
                                    {note.title}
                                </AccordionButton>
                            </span>
                            <div>
                                <Button href={`/note/${note._id}`}>Edit</Button>
                                <Button variant="danger" className="mx-2" onClick={() => deleteHandler(note._id)}>Delete</Button>
                            </div>
                        </Card.Header>

                        <AccordionCollapse eventKey="">
                            <Card.Body>
                                <h4>
                                    <Badge className="btn btn-success">
                                        category-{note.category}
                                    </Badge>
                                </h4>
                                <blockquote className="blockquote mb-0">
                                    <p>
                                        {note.content}
                                    </p>
                                    <footer className="blockquote-footer">
                                        Created on-date
                                    </footer>
                                </blockquote>
                            </Card.Body>
                        </AccordionCollapse>
                    </Card>

                </Accordion>
            )) */}
            }
        </MainPage >
    )
}