diff --git a/src/pages/top.js b/src/pages/top.js
index 02d78d836..0d128c8ff 100644
--- a/src/pages/top.js
+++ b/src/pages/top.js
@@ -14,8 +14,8 @@ import * as utils from '../models/utils';
 const useStyles = makeStyles()((theme) => ({
   root: {
     padding: theme.spacing(3, 4),
-    maxWidth: "100%",
-    boxSizing: "border-box",
+    maxWidth: '100%',
+    boxSizing: 'border-box',
   },
   title: {
     fontFamily: 'Montserrat',
@@ -42,7 +42,7 @@ const useStyles = makeStyles()((theme) => ({
 
 export default function Top({ trees, countries }) {
   // use map context to get the map
-  const mapContext = useMapContext();
+  const { map } = useMapContext();
 
   const { classes } = useStyles();
 
@@ -55,21 +55,21 @@ export default function Top({ trees, countries }) {
 
     const { lat, lon } = country.centroid;
 
-    const { map } = mapContext;
     map.flyTo(lat, lon, 6);
   }
 
   function handleFilter(filter) {
     log.warn('handleFilter', filter);
-    mapContext.map.setFilters({
+    if (!map) return;
+    map.setFilters({
       timeline: `${filter.startDate}_${filter.endDate}`,
     });
-    mapContext.map.rerender();
+    map.rerender();
   }
 
   return (
     <div className={classes.root}>
-      <Box sx={{display: "flex", justifyContent: "flex-end", }}>
+      <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
         <Filter onFilter={handleFilter} />
       </Box>
       <Typography variant="h2" className={classes.title}>