Смена ховер эффекта в меню

src/pages/dashboard/Menu/index.tsx

@@ -117,10 +117,18 @@ const Navigation = (props: any) => {
         background: "#2f3339",
       }}
     >
-      {links.map((e, i) => (
+      {links.map((e, index) => (
-        <ListItem key={i} disablePadding sx={{ display: "block" }}>
+        <ListItem key={index} disablePadding sx={{ display: "block" }}>
-          <Link to={e.path} style={{ textDecoration: "none" }} className={e.className}>
+          <Link
+            to={e.path}
+            style={{
+              textDecoration: "none",
+            }}
+            className={e.className}
+          >
             <ListItemButton
+              disableGutters
+              disableRipple
               onClick={props.SladeMobileHC}
               sx={{
                 minHeight: 48,
@@ -128,6 +136,9 @@ const Navigation = (props: any) => {
                 justifyContent: props.visible ? "initial" : "center",
                 px: 2.5,
                 margin: "20px 0",
+                "&:active": {
+                  background: "gray",
+                },
               }}
             >
               <ListItemIcon