handle run time error

src/components/Employee/EmpAttendance.jsx

@@ -22,6 +22,7 @@ const EmpAttendance = ({ employee }) => {
     data = [],
     isLoading: loading,
     isFetching,
+    isError,
     error,
     refetch,
   } = useAttendanceByEmployee(employee, dateRange.startDate, dateRange.endDate);
@@ -145,7 +146,7 @@ const EmpAttendance = ({ employee }) => {
         </div>
         <div className="table-responsive text-nowrap">
           {!loading && data.length === 0 && <span>No employee logs</span>}
-          {error && <div className="text-center">{error}</div>}
+          {isError && <div className="text-center">{error.message}</div>}
           {loading && !data && <div className="text-center">Loading...</div>}
           {data && data.length > 0 && (
             <table className="table mb-0">

src/components/Layout/Sidebar.jsx

@@ -7,7 +7,8 @@ import { MenuItemSkeleton } from "./MenuItemSkeleton";
 
 const Sidebar = () => {
   const navigate = useNavigate();
-  const { data, isError, isLoading, isFetched } = useSidBarMenu();
+  const { data, isError, isLoading, isFetched,error } = useSidBarMenu();
+  console.log(data)
   return (
     <aside
       id="layout-menu"
@@ -35,6 +36,10 @@ const Sidebar = () => {
       <div className="menu-inner-shadow"></div>
 
       <ul className="menu-inner py-1">
+
+        {isError && (
+          <div className="text-center text-small">{error.message}</div>
+        )}
         {isLoading && (
           <>
             {[...Array(7)].map((_, idx) => (
@@ -47,7 +52,7 @@ const Sidebar = () => {
           </>
         )}
         {data &&
-          data.map((section) => (
+          data?.data.map((section) => (
             <React.Fragment key={(Math.random() + 1).toString(36)}>
               {/* {section.header && (
               <li className="menu-header small text-uppercase">