using location hook to properly update render so it highlights the correct button after it's pressed based on url

src/navigation/SideNavigator.tsx

@@ -5,7 +5,7 @@ import classNames from "classnames";
 import { useWidth } from "../hooks/useWidth";
 import { makeStyles } from "@mui/styles";
 import BindaptIcon from "../products/Bindapt/BindaptIcon";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 
 const drawerWidth = 230;
 
@@ -78,6 +78,7 @@ export default function SideNavigator(props: Props) {
   const theme = useTheme();
   const width = useWidth();
   const classes = useStyles();
+  const location = useLocation();
 
   const getClasses = (page: string) => {
     if (page === "/device") {
@@ -105,8 +106,8 @@ export default function SideNavigator(props: Props) {
         <Tooltip title="Devices" placement="right">
           <ListItemButton
             id="tour-dashboard"
-            // component={Link}
+            component={Link}
-            // to="/devices"
+            to="/devices"
             onClick={onClose}
             classes={getClasses("/device")}
             >
@@ -122,12 +123,12 @@ export default function SideNavigator(props: Props) {
             component={Link}
             to="/teams"
             onClick={onClose}
-            classes={getClasses("/device")}
+            classes={getClasses("/team")}
             >
             <ListItemIcon>
               <People />
             </ListItemIcon>
-            {open && <ListItemText primary="Devices" />}
+            {open && <ListItemText primary="Teams" />}
           </ListItemButton>
         </Tooltip>
       </List>