title: How to flyTo and then getBounds around location based on selected location in react-leaflet
body: <p>How can i zoom on particular location or flyTo that particular location dynamically when location selected dynamically from list of cities dropdown and the getBounds around that location. I am trying to reference this <a href="https://stackoverflow.com/questions/60734165/how-to-call-fitbounds-and-getbounds-in-react-leaflet">answer</a> but this can work after flyTo happens. So how can use flyTo with my code.</p>
  <pre><code>    useEffect(() =&gt; {
    const cityFilter = () =&gt; {
      let geocodes = JSON.parse(sessionStorage.getItem('geocode'));
      let mapData = props.allEquipData.filter((filtered) =&gt; {
        return filtered.city === selectedCity;
      });
      Promise.all(
        mapData.map(async (data) =&gt; {
          let selectedLocGeo = geocodes.filter((geo) =&gt; geo.zip == data.zipcode);
          if (selectedLocGeo.length &gt; 0) {
            data.coordinates = [selectedLocGeo[0].latitude, selectedLocGeo[0].longitude];
          } else {
            data.coordinates = [0, 0];
          }
          return data;
        })
      )
        .then((response) =&gt; {
          let markerData = [];
          let count = 1;
          response.map((resp, index) =&gt; {
            if (resp.coordinates[0] !== 0 &amp;&amp; resp.coordinates[1] !== 0) {
              let existingPositionIndex = markerData.findIndex(
                (mark) =&gt;
                  mark.positions &amp;&amp; mark.positions.length &amp;&amp; mark.positions[0] === resp.coordinates[0] &amp;&amp; mark.positions[1] === resp.coordinates[1]
              );
              if (existingPositionIndex &gt; -1) {
                markerData[existingPositionIndex].devices.push(resp);
              } else {
                let obj = {
                  positions: resp.coordinates,
                  key: 'marker' + count,
                  devices: [resp],
                  location: resp.city + ', ' + resp.state,
                };
                markerData.push(obj);
                count++;
              }
            }
          });
  
          // let group = new L.featureGroup([markerData[0].positions]);
          // mapRef.firBounds(group.getBounds());
          // console.log('oth position : ', markerData[0].positions);
  
          // const map = mapRef.current;
          // // console.log('map : ',map.leafletElement.flyTo);
          // // var group = new L.featureGroup([L.marker(markerData[0].positions)]);
          // // if (map) map.leafletElement.fitBounds(group.getBounds());
  
          // if (map) {
          //   map.flyTo(markerData[0].positions, 10);
  
          setFilteredMarkers(markerData);
        })
        .catch((err) =&gt; {
          console.log('Err', err);
        });
    };
    cityFilter();
  }, [selectedCity]);
  
  &lt;Map
    center={position}
    zoom={5}
    maxZoom={100}&gt;
    &lt;LayersControl position='topright'&gt;
      &lt;LayersControl.Overlay name='Markers' checked&gt;
        &lt;LayerGroup&gt;
          &lt;MyMarkersList markers={handleMarkers(markerData)} /&gt;
        &lt;/LayerGroup&gt;
      &lt;/LayersControl.Overlay&gt;
    &lt;/LayersControl&gt;
  &lt;/Map&gt;
  </code></pre>
  <p>when city will be selected from dropdown, the useEffect will be called and then it will get you the markers position based on selected city e.g [lat,log]. from this point it should flyTo that location and getBounds around it if possible.</p>