I have a situation where i can successfully dispatch my states with reducers and i can render it in my component

Here the relevant code

in my action/index.js

export const receivedLeaguesList = json => ({

  type: RECEIVE_LEAGUES_LIST,

  json: json

});



export function fetchLeaguesList() {

  return function(dispatch) {

    dispatch(requestLeaguesList());

      return axios

        .get(https://www.api-football.com/demo/v2/leagues/)

        .then(res => {

          let leagues = res.data.api.leagues;

          dispatch(receivedLeaguesList(leagues));

        })

        .catch(e => {

          console.log(e);

        });

    }

}

my reducers/index.js

import { REQUEST_LEAGUES_LIST, RECEIVE_LEAGUES_LIST } from ../actions;



const initialState = {

  leaguesList: [],

  isLeagueListLoading: false

};



const reducer = (state = initialState, action) => {

  switch (action.type) {

    case REQUEST_LEAGUES_LIST:

      return { ...state, isLeagueListLoading: true };

    case RECEIVE_LEAGUES_LIST:

      return { ...state, leaguesList: action.json, isLeagueListLoading: false };

    default:

      return state;

  }

};

in my component component/Leagues.js

let Leagues = ({ leaguesList, loading, getList }) => {

  useEffect(() => {

    getList();

  }, [getList]);





  const [itemsLeagues] = useState([leaguesList]);



  console.log(league list, itemsLeagues);



const mapDispatchToProps = {

  getList: fetchLeaguesList

};

I have reproduced the demo here => https://codesandbox.io/s/select-demo-71u7h?

I can render my leaguesList states in my component doing the map, but why when

  const [itemsLeagues] = useState([leaguesList]);



  console.log(league list, itemsLeagues); 

returns an empty array ?

See the image