title: Property 'context' is missing in type '{ instance: any; }' but required in type 'LeafletElement<Evented, any>'
body: <p>I'm trying to execute  this <code>react-leaflet</code> example:  <a href="https://react-leaflet.js.org/docs/example-react-control/" rel="nofollow noreferrer">https://react-leaflet.js.org/docs/example-react-control/</a></p>
  <p>This is the code:</p>
  <pre><code>import * as React from 'react';
  
  import * as leaflet from 'leaflet'
  import { MapContainer, TileLayer, Marker, Popup, useMapEvent, useMap, Rectangle } from 'react-leaflet'
  import { useEventHandlers } from '@react-leaflet/core'
  
  
  import &quot;leaflet/dist/leaflet.css&quot;
  import &quot;leaflet/dist/images/marker-shadow.png&quot;
  
  import Box from '@mui/material/Box'
  
  export default function Mapping(props) {
  
    // Classes used by Leaflet to position controls
    const POSITION_CLASSES = {
      bottomleft: 'leaflet-bottom leaflet-left',
      bottomright: 'leaflet-bottom leaflet-right',
      topleft: 'leaflet-top leaflet-left',
      topright: 'leaflet-top leaflet-right',
    }
  
    const BOUNDS_STYLE = { weight: 1 }
  
    function MinimapBounds({ parentMap, zoom }) {
      const minimap = useMap()
  
      // Clicking a point on the minimap sets the parent's map center
      const onClick = React.useCallback(
        (e) =&gt; {
          parentMap.setView(e.latlng, parentMap.getZoom())
        },
        [parentMap],
      )
      useMapEvent('click', onClick)
  
      // Keep track of bounds in state to trigger renders
      const [bounds, setBounds] = React.useState(parentMap.getBounds())
      const onChange = React.useCallback(() =&gt; {
        setBounds(parentMap.getBounds())
        // Update the minimap's view to match the parent map's center and zoom
        minimap.setView(parentMap.getCenter(), zoom)
      }, [minimap, parentMap, zoom])
  
      // Listen to events on the parent map
      const handlers = React.useMemo(() =&gt; ({ move: onChange, zoom: onChange }), [])
      useEventHandlers({ instance: parentMap }, handlers)
  
      return &lt;Rectangle bounds={bounds} pathOptions={BOUNDS_STYLE} /&gt;
    }
  
    function MinimapControl({ position, zoom }) {
      const parentMap = useMap()
      const mapZoom = zoom || 0
  
      // Memoize the minimap so it's not affected by position changes
      const minimap = React.useMemo(
        () =&gt; (
          &lt;MapContainer
            style={{ height: 80, width: 80 }}
            center={parentMap.getCenter()}
            zoom={mapZoom}
            dragging={false}
            doubleClickZoom={false}
            scrollWheelZoom={false}
            attributionControl={false}
            zoomControl={false}&gt;
            &lt;TileLayer url=&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot; /&gt;
            &lt;MinimapBounds parentMap={parentMap} zoom={mapZoom} /&gt;
          &lt;/MapContainer&gt;
        ),
        [],
      )
  
      const positionClass =
        (position &amp;&amp; POSITION_CLASSES[position]) || POSITION_CLASSES.topright
      return (
        &lt;div className={positionClass}&gt;
          &lt;div className=&quot;leaflet-control leaflet-bar&quot;&gt;{minimap}&lt;/div&gt;
        &lt;/div&gt;
      )
    }
  
    return (
      &lt;div&gt;
        &lt;h3&gt;Map&lt;/h3&gt;
  
        &lt;div id=&quot;map&quot;&gt;
  
          &lt;MapContainer
            center={[51.505, -0.09]}
            zoom={13}
            scrollWheelZoom={false}
            style={{ height: '100vh', width: '100wh' }}
          &gt;
  
            &lt;TileLayer
              attribution='&amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
              url=&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;
            /&gt;
  
            &lt;Marker position={[51.505, -0.09]}&gt;
              &lt;Popup&gt;
                A pretty CSS3 popup. &lt;br /&gt; Easily customizable.
              &lt;/Popup&gt;
            &lt;/Marker&gt;
          &lt;/MapContainer&gt;
  
        &lt;/div&gt;
  
  
      &lt;/div&gt;
    )
  </code></pre>
  <p>I'm getting this error message:</p>
  <pre><code>src/app_D/components/mapVisualize/maps.tsx:54:22 - error TS2345: Argument of type '{ instance: any; }' is not assignable to parameter of type 'LeafletElement&lt;Evented, any&gt;'.
    Property 'context' is missing in type '{ instance: any; }' but required in type 'LeafletElement&lt;Evented, any&gt;'.
  
  54     useEventHandlers({ instance: parentMap }, handlers)
                          ~~~~~~~~~~~~~~~~~~~~~~~
  
    node_modules/@react-leaflet/core/types/element.d.ts:5:5
      5     context: LeafletContextInterface;
            ~~~~~~~
      'context' is declared here.
  
  src/app_D/components/mapVisualize/maps.tsx:104:10 - error TS2741: Property 'zoom' is missing in type '{ position: string; }' but required in type '{ position: any; zoom: any; }'.
  
  104         &lt;MinimapControl position=&quot;topright&quot; /&gt;
           ~~~~~~~~~~~~~~
  </code></pre>
  <p>If I &quot;convert&quot; the file to a javascript file: <code>maps.tsx</code> -&gt; <code>maps.js</code> , then it works fine:</p>
  <p><a href="https://i.stack.imgur.com/PtwGe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PtwGe.png" alt="enter image description here" /></a></p>
  <p>So it must be something related to <code>typescript types</code></p>
  <p>Other info:</p>
  <pre><code>&quot;@types/leaflet&quot;: &quot;^1.7.8&quot;
  &quot;leaflet&quot;: &quot;^1.7.1&quot;
  &quot;webpack&quot;: &quot;^5.23.0&quot;
  &quot;react&quot;: &quot;^17.0.2&quot;
  &quot;react-leaflet&quot;: &quot;^3.2.5&quot;
  node: v16.13.0
  O.S.: Ubuntu 20.04 Desktop
  </code></pre>
  <p>How to solve the problem?</p>