React TypeError: Cannot read properties of undefined (reading ‘map’)

I am not sure what is going on here but it saying that the data is undefined, I have checked and the data is there in the redux store and can be console loged on the APP.js file

App.js

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import axios from "axios";

import "./App.css";
import { setAbsences } from "./store/absence/absences.action";
import { selectAbsences } from "./store/absence/absences.selectors";

function App() {
  const absence = useSelector(selectAbsences);
  const dispatch = useDispatch();

  useEffect(() => {
    const getAbsences = async () => {
      try {
        const result = await axios.get(
          `https://front-end-kata.brighthr.workers.dev/api/absences`
        );

        dispatch(setAbsences(result.data));
      } catch (error) {
        console.error("Error fetching absences:", error);
      }
    };
    getAbsences();
  }, []);

  return (
    <div className="App">
      <h1>List of absences</h1>

      {absence && absence?.absence?.length > 0 ? (
        absence?.absence.map((i) =>
          Object.entries(i).map((abs) =>
            abs[1].employee.map((n) => (
              <div className="card" key={i.id}>
                <>
                  <p>First Name: {n.firstName}</p>
                  <p>Last Name: {n.lastName}</p>
                </>
                <p>ID: {i.startDate}</p> <p>Start Date: {i.startDate}</p>{" "}
                <p>Days: {i.days}</p>
                <p>absenceType: {i.absenceType}</p>
                <p>Status: {i.approved}</p>
              </div>
            ))
          )
        )
      ) : (
        <p>No data Found</p>
      )}
    </div>
  );
}

export default App;

any help would be greatly appreciated, I have attached picture of my console.