React redux useSelector hook with map

Can't figure out why i can't map through data that i recieve from useSelect. I am trying to display list with names of my data, but nothing happens. And one more thing. When i'm trying to "console.log" my data, i recieve empty array, then after full of data. Maybe that's why, i get my "ul" empty. How to solve this problem?

import Header from "../components/Header";
import Footer from "../components/Footer.js";
import Hero_card from "../components/Hero_card";

import { useDispatch, useSelector } from "react-redux";
import { fetchHeroes } from "../store/heroes-slice";
import { useEffect } from "react";

export default function Heroes() {
  const heroes_data = useSelector((state) => state.heroes.heroes_data);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchHeroes());
  }, [dispatch]);

  console.log(heroes_data);

  const heroes_cards = heroes_data.map((item, i) => {
    return <li key={i}>{item.name}</li>;
  });

  return (
    <div className={classes.main}>
      <Header />
      <section className={classes.heroes}>
        <Hero_card />
      </section>
      <ul>{heroes_cards}</ul>
      <Footer />
    </div>
  );
}