feat: fix Control component

src/components/Control/Control.tsx

@@ -0,0 +1,34 @@
+import L from 'leaflet';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const POSITION_CLASSES = {
+  bottomleft: 'leaflet-bottom leaflet-left',
+  bottomright: 'leaflet-bottom leaflet-right',
+  topleft: 'leaflet-top leaflet-left',
+  topright: 'leaflet-top leaflet-right',
+};
+
+const Control = (props): JSX.Element => {
+  const [container, setContainer] = React.useState<any>(
+    document.createElement('div')
+  );
+  const positionClass =
+    (props.position && POSITION_CLASSES[props.position]) ||
+    POSITION_CLASSES.topright;
+
+  React.useEffect(() => {
+    const targetDiv = document.getElementsByClassName(positionClass);
+    setContainer(targetDiv[0]);
+  }, [positionClass]);
+
+  const controlContainer = (
+    <div className="leaflet-control leaflet-bar">{props.children}</div>
+  );
+
+  L.DomEvent.disableClickPropagation(container);
+
+  return ReactDOM.createPortal(controlContainer, container);
+};
+
+export default Control;

src/components/LooMap/LooMap.tsx

@@ -136,10 +136,12 @@ const LooMap: React.FC<LooMapProps> = ({
         {mapState.focus && <CurrentLooMarker loo={mapState.focus} />}
         <Markers />
 
+        <LocateMapControl position="bottomright" />
+
         <Media greaterThan="md">
           <ZoomControl position="bottomright" />
         </Media>
-        <LocateMapControl position="bottomright" />
+
         <MapTracker />
       </MapContainer>
     </Box>

src/components/Sidebar.tsx

@@ -1,5 +1,4 @@
 import { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import isPropValid from '@emotion/is-prop-valid';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -53,7 +52,6 @@ const Sidebar = () => {
   const [isFiltersExpanded, setIsFiltersExpanded] = useState(false);
   const filterToggleRef = useRef(null);
   const [mapState, setMapState] = useMapState();
-  const { filters } = mapState;
 
   return (
     <section aria-labelledby="heading-search">