Error: Map container is already initialized.

[emadbaqeri]

I'm having issue while rerendering the map with useEffect

  const [baseViewCoords, setBaseViewCoords] = useState([37.715, 44.8611]);

  const searchApiHandler = () => {
  // some code that will fetch new values for baseViewCoords and set to the state
  };

  useEffect(() => {

    var map = L.map('map').setView(baseViewCoords, 13);
[](url)
    var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap<\/a> contributors'
    }).addTo(map);

    var stamenLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
        attribution:
            'Map tiles by <a href="http://stamen.com">Stamen Design<\/a>, ' +
            '<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0<\/a> &mdash; ' +
            'Map data {attribution.OpenStreetMap}',
        minZoom: 1,
        maxZoom: 16
    }).addTo(map)

    L.control.sideBySide(stamenLayer, osmLayer).addTo(map);
  }, [baseViewCoords]);

return (
     <div id="map" />
)

I'm trying to change the position of map and rerender it after fetching api but shows the in attached files

[emadbaqeri]

I would be happy if you help me solve this problem. Any suggestion or idea would be appreciated.