Can not render/display the fetched data from an api using, ReactJs, Axios, Redux

this is where all the things are happening

      const Home = () => {
          //FETCHING THE INFORAMATION
          const dispatch = useDispatch();
          useEffect(() => {
            dispatch(fetchHeroes());
          }, [Home]);
          //PULLING THE DATA OR EXTRACTING IT FROM THE STATE
          const { heroesInfo, heroName, heroType, attackType, mostPicked } =
            useSelector((state) => state.HeroesInfoAll);
          console.log(heroesInfo);
          return (
            <div>
              <HeroList>
                {heroesInfo.map((heroes) => {
                  <Heroes />;
                })}
              </HeroList>
            </div>
          );
        };

I am also learning about Redux. I have use the reducer which has these arrays in which I want to pass the values accordingly for now though I am only passing the value to the "heroesInfo" array


    const initState = {
      heroesInfo: [],
      heroName: [],
      heroType: [],
      attackType: [],
      mostPicked: [],
    };
    
    const HInfoReducer = (state = initState, action) => {
      switch (action.type) {
        case "FETCH_HEROES":
          return { ...state, heroesInfo: action.payload.heroesInfo };
        default:
          return { ...state };
      }
    };
    
    
    export default HInfoReducer;

This is the Heroes component Which I want to render out for each data value present in state which you can see in the first code snippet


    const Heroes = () => {
      return (
        <>
          <h1>Hero Name</h1>
          <div className="hero-image">
            <img src="" alt="Hero Image" />
          </div>
          <h2>Hero Type</h2>
          <h2></h2>
        </>
      );
    };
    export default Heroes;

I also console logged out some results to confirm the data was present in the state or not. Installed Redux tools to check it out as well here is the result


[this image shows that the data was extracted for sure after the FETCH_HEROES action ran][1]
[Here I console logged out the heroesInfo array which has the data which I want in it however on the left side my screen is completely blank. I expect it to render out my component for each element present inside of the array][2]


  [1]: https://i.sstatic.net/nRqZr.png
  [2]: https://i.sstatic.net/CZbHn.png

I hope I don't get banned this time, I really don't know how to ask questions but all I want to know is why is the component not being rendered out even though the data is present in their?

Solution

I rewrote the code and can get the data now but I have a new problem which I will be asking soon.