react-leaflet map.locate() overrides state when updated through <select> in a different component - react-hooks

Question

I am trying to build an app with a map that takes the user to their location when loaded , but once that is done it should move to any country through a select box. I am using a geoJSON file to update the state both in the and the component.
This works when on load, but when I try to change the country borders through the select box the state immediately re-updates to the current location country .
ex. current location is Ireland so when the map is loaded console.log(countryIso_a3) is IRL . When selecting Albania, console.log(countryIso_a3) is ALB but immediately updates to IRL.
Here is my code :
App.js :
import "./App.css";
import { Fragment, useEffect, useState } from "react";
import NavBar from "./components/navbar/Navbar";
import BasicMap from "./components/leaflet/BasicMap";
function App() {
const [countryIso_a3, setCountryIso_a3] = useState("");
const [countryBorders, setCountryBorders] = useState({});
return (
<Fragment>
<NavBar
setCountryIso_a3={setCountryIso_a3}
setCountryBorders={setCountryBorders}
/>
<BasicMap
setCountryIso_a3={setCountryIso_a3}
setCountryBorders={setCountryBorders}
countryBorders={countryBorders}
/>
</Fragment>
);
}
export default App;
BasicMap.js
import React, { useEffect, useState } from "react";
import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
import osm from "./osm_providers";
import "leaflet/dist/leaflet.css";
import icon from "./icons";
import L from "leaflet";
import countryData from "../../countryData.json";
function BasicMap({ countryBorders,setCountryIso_a3, setCountryBorders }) {
function LocationMarker() {
const [center, setCenter] = useState(null);
const [bbox, setBbox] = useState([]);
const map = useMap();
useEffect(() => {
map.locate().on("locationfound", function (e) {
setCenter(e.latlng);
map.flyTo(e.latlng, map.getZoom());
const radius = e.accuracy;
const circle = L.circle(e.latlng, radius);
circle.addTo(map);
setBbox(e.bounds.toBBoxString().split(","));
map.fitBounds(L.geoJson(countryBorders).addTo(map).getBounds());
for (let details of countryData) {
for (let coordinateSet of details.geometry.coordinates) {
for (let coordinates of coordinateSet) {
if (
e.latlng.lat < coordinates[1] &&
e.latlng.lng > coordinates[0]
) {
setCountryIso_a3(details.properties.iso_a3);
setCountryBorders(details.geometry);
}
}
}
}
})
return function cleanup() {
map.stopLocate();
};
}, [map]);
return center === null ? null : (
<Marker position={center} icon={icon}>
<Popup>
You are here. <br />
Map bbox: <br />
<b>Southwest lng</b>: {bbox[0]} <br />
<b>Southwest lat</b>: {bbox[1]} <br />
<b>Northeast lng</b>: {bbox[2]} <br />
<b>Northeast lat</b>: {bbox[3]}
</Popup>
</Marker>
);
}
return (
<MapContainer
center={[49.1951, 16.6068]}
zoom={13}
scrollWheelZoom
style={{ height: "100vh" }}
>
<TileLayer
url={osm.maptiler.url}
attribution={osm.maptiler.attribution}
/>
<LocationMarker />
</MapContainer>
);
}
export default BasicMap;
I have tried wrapping BasicMap in React.memo (React.memo(BasicMap)) and it works but I am not sure this is the right solution.