fixing token error

src/components/Home/index.jsx

@@ -31,6 +31,7 @@ const Home = () => {
     setTitle("Home");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
   return (
     <div className={classes.paper}>
       <Typography className={classes.homePageTitle} component="h1" variant="h5">

src/components/VehicleMap/index.jsx

@@ -5,7 +5,6 @@ import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
 import { Button } from "@material-ui/core";
 
 import { useUserContext } from "../Contexts/UserContext";
-import { useStatusContext } from "../Contexts/StatusContext";
 import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
 import { VehiclePopUp } from "./popup";
 import GreenCarIcon from "../../assets/green-car.png";
@@ -13,17 +12,15 @@ import RedCarIcon from "../../assets/red-car.png";
 
 const Component = () => {
   const classes = useStyles();
-  const { token } = useUserContext();
+  const {
-  const { setTitle } = useStatusContext();
+    token: {
+      idToken: { jwtToken: token },
+    }
+  } = useUserContext();
   const { getConnections, getLocations, getState } = useVehicleContext();
 
   const REQUEST_INTERVAL = 10000;
 
-  useEffect(() => {
-    setTitle("");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const [center, setCenter] = useState([0, 0]);
   const [zoom, setZoom] = useState(2);
   const [markers, setMarkers] = useState([]);